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内 容 简 介 


本 书 全 面 、 系 统 地 讲解 了 HTML 5 和 CSS 3 从 Web 界面 设计 到 Web 应 用 开发 的 各 种 技术 。 本 书 难度 
适中 ， 学 习 梯度 科学 ， 知 识 架 构 严 谨 ， 内 容 由 浅 入 深 、 从 易 到 难 ， 讲 解 通俗 易 懂 ， 并 注重 读者 兴趣 的 培 
养 ， 讲 解 时 还 列举 了 大 量 实例 ， 以 帮助 读者 提高 实战 技能 。 本 书 配 带 1 张 光盘 ， 内 容 为 本 书 重点 内 容 的 
教学 视频 和 本 书 涉及 的 源 代码 。 

本 书 共 17 章 , 分 为 3 篇。 第 1 篇 为 技术 概览 ， 简 要 介绍 HTML 5 标准 和 CSS 3 层 营 样式 表 等 内 容 ; 第 2 
篇 为 基于 CSS 3 的 Web 界面 设计 实战 ， 重 点 介绍 文字 、 背 景 、 边 框 、 盒 布局 、 多 列 布局 、 动 画 、 渐 变 、 支 持 
多 种 设备 的 样式 表 等 内 容 ; 第 3 篇 为 基于 HIML 5 的 Web 应 用 开发 实战 ， 重 点 介绍 绘图 、 音 频 和 视频 、 新 型 
表单 、 拖 放 、 本 地 存储 、 离 线 应 用 、 跨 源 通信 、WebSocket 双向 通信 、 多 线程 和 地 理 位 置 等 内 容 。 

本 书 适合 Web 设计 与 开发 的 新 手 阅读 ， 也 适合 有 一 定 Web 前 端 开发 基础 的 网 页 开发 人 员 阅 读 ; 对 于 
大 中 专 院 校 的 学 生 ， 本 书 也 不 失 为 一 本 网 页 开发 的 好 教材 。 如 果 阅 读本 书 的 读者 具备 CSS 样式 表 和 
JavaScript 的 基础 知识 ， 学 习 效果 会 更 好 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 (CIP) 数据 

HTML 5+CSS 3 网 页 开发 实战 精 解 / 杨 习 伟 等 编著 . 一 北京 : 清华 大 学 出 版 社 ，2013.1 
(Web 开发 典藏 大 系 ) 

ISBN 978-7-302-28867-1 


I. OH… “II. @ 杨 … I. @ 超 文本 标记 语言 -程序 设计 @@ 网 页 制作 工具 IV. TP312@TP393.092 


中 国 版 本 图 书馆 CIP 数据 核 字 (2012) 第 104736 号 


责任 编辑 ， 夏 兆 彦 
封面 设计 : 欧 振 旭 
责任 校对 : 徐 俊 伟 
责任 印 制 : 


出 版 发 行 : 清华 大 学 出 版 社 
网 址 : http://www.tup.com.cn, http://www.wqbook.com 
地 址 : 北京 清华 大 学 学 研 大 厦 A 座 邮 ” 编 : 100084 
社 总 机 : 010-62770175 邮  ” 购 : 010-62786544 
投稿 与 读者 服务 : 010-62776969，c-service@tup.tsinghua.edu.cn 
质量 反馈 : 010-62772015，zhiliang@tup.tsinghua.edu.cn 


当 鹿 


并 涂 闻 部 


全 国 新 华 书 店 
: 185mmX260mm 印 ” 张 : 24.75 字 ” 数 : 612 千 字 
〈 附 光盘 1 张 ) 
: 2013 年 1 月 第 1 版 印 ”次 : 2013 年 1 月 第 1 次 印刷 
1~ 000 
元 


而 避 于” 单 院 涪 召 
礼 湾 尝 


4 
a0 
Ea 
由 


: 047124-01 


了 中 


前 


HTML 5 和 CSS 3 代表 了 下 一 代 的 HIML 和 CSS 技术 ,它们 必 将 推动 互联 网 的 快速 发 
展 。 无 论 是 移动 开发 ， 还 是 云 计 算 ，HTML 5 担负 着 不 可 替代 的 使 命 ， 已 经 延伸 到 各 个 应 
用 领域 。 对 于 界面 而 言 ，CSS 3 则 是 首选 技术 。 

目前 ， 当 HTML 5 和 CSS 3 的 相关 规范 还 在 不 断 完善 时 ， 各 大 浏览 器 厂商 就 已 经 紧 锣 
密 鼓 地 完善 浏览 器 的 功能 ， 以 便 更 好 地 支持 最 新 的 规范 。 由 此 可 以 看 出 ， 各 大 厂商 对 这 二 
者 是 多 么 重视 。 也 许 有 人 觉得 ，HTML 5 和 CSS 3 尚未 成 熟 ， 并 且 很 多 用 户 仍然 在 使 用 早 
期 的 浏览 器 ， 所 以 不 适合 进行 大 规模 开发 和 应 用 。 但 其 实在 HIML 5 的 规范 中 ， ee 
了 过 渡 性 的 问题 ， 它 不 但 有 超 强 的 兼容 性 ， 还 以 一 种 引导 的 方式 引导 用 户 升级 浏览 器 
tie ete hem sca 

沿 着 这 个 发 展 趋势 ， 不 久 的 将 来 ，Web 前 端 开发 的 含金量 会 越 来 越 高 ， 门 槛 也 会 越 来 
越 高 , Web 前 端 技 术 必 将 进入 一 个 细 新 的 时 代 。 而 正 是 HIML 5 和 CSS 3 开启 了 这 扇 大 门 。 
es 
须 掌 握 的 前 沿 技 术 了 。 基 于 此 ， 作 者 总 结 了 已 经 公布 的 HIML 5 和 CSS 3 的 相关 技术 规范 
和 标准 ， pnt ati een 写成 了 本 书 ， 希 望 为 想 学 习 HIML 5 和 
CSS 3 技术 的 读者 提供 必要 的 帮助 。 另 外 ，HTML 5 和 CSS 3 仍然 在 发 展 之 中 ， 很 多 人 对 
此 知之 甚 少 ， 甚 至 有 很 多 误解 或 偏 匈 ， 希 望 通过 本 书 以 正视 听 ， 帮 助 有 志 之 士 和 好 学 之 人 
进入 这 个 崭新 的 领域 。 


本 书 特 色 


1. 提供 配套 的 多 媒体 教学 视频 

本 书 中 的 重点 内 容 都 专门 录制 了 配套 的 多 媒体 视频 ， 以 帮助 读者 更 加 直观 而 高 效 地 学 
习 ， 从 而 达到 事半功倍 的 效果 。 

2. 内 容 架 构 独特 、 科 学 ， 构 思 巧 妙 、 新 颖 

本 书 每 章 都 集中 探讨 一 组 可 以 通过 HTML 5 和 CSS 3 解决 的 特定 问题 ,而 区 别 于 传统 
图 书 中 将 HTML 5 和 CSS 3 技术 机 械 罗 列 。 通 过 这 种 主题 归纳 的 方法 ， 可 以 让 读者 感受 实 
际 的 网 页 开发 是 如 何 进行 的 ， 从 而 提高 实战 水 平 。 

3. 内 容 新 颖 ， 纳 入 了 最 新 的 技术 规范 

本 书 以 当前 Web 开发 中 最 热门 的 HTML 5 和 CSS 3 为 写作 版 本 ， 写 作 时 查阅 了 大 量 
官方 英文 资料 中 的 HTML 5 和 CSS 3 最 新 发 布 的 规范 和 标准 ， 并 纳入 本 书 内 容 ， 让 本 书 得 
以 展示 最 新 技术 的 魅力 。 


HTML 5+CSS 3 网 页 开发 实战 精 解 


4. 内 容 全 面 、 系 统 


本 书 内 容 涉及 HTML 5 和 CSS 3 从 Web 界面 设计 到 Web 应 用 开发 的 各 种 技术 ， 涵 盖 
了 Web 前 端 设计 需要 的 方方面面 技术 。 掌 握 这 些 技术 ， 便 可 以 胜任 相关 的 开发 工作 。 


5. 难度 适中 ， 讲 解 由 浅 入 深 ， 学 习 梯 度 科学 
本 书 内 容 遵循 技术 概览 一 Web 界面 开发 一 Web 应 用 开发 的 学 习 梯度 ， 讲 解 由 浅 入 深 ， 


由 易 到 难 ， 逐 层 推进 ， 学 习 梯度 平滑 ， 读 者 容易 掌握 。 阅 读本 书 ， 读 者 会 有 一 种 轻 轻松 松 
的 感觉 。 


6. 以 实例 讲解 ， 用 插图 说 话 ， 提 高 实战 技能 


本 书 各 章 的 重点 内 容 都 穿插 了 大 量 实例 进行 讲解 ， 引 导读 者 学 习 ， 帮 助 读者 更 好 地 理 
解 相关 技术 要 点 ， 快 速 掌握 实际 开发 中 的 各 种 实战 技能 。 另 外 ， 本 书 在 讲解 时 ， 尽 可 能 提 
供 丰富 的 插图 ， 这 样 可 以 更 加 直观 地 理解 知识 ， 学 习 起 来 也 更 加 快捷 。 

7， 娓 娓 道 来 ， 轻 松 愉快 ， 趣 味 性 强 

本 书 采用 幽默 和 风趣 的 讲述 方式 来 讲解 ， 妮 九 道 来 ， 阅 读 起 来 轻松 愉快 。 书 中 的 每 句 
话 都 力求 通俗 易 履 ， 避 免 那 种 云 山 筋 罩 式 的 讲解 。 这 种 活泼 的 风格 ， 可 以 激发 读者 的 学 习 
兴趣 ， 达 到 更 好 的 学 习 效 果 。 


内 容 概览 


第 1 篇 ”技术 概览 〈 第 1 章 、 第 2 章 ) 

本 篇 简单 介绍 了 HTML 5 和 CSS 3 的 发 展 背景 及 发 展现 状 ,并 介绍 了 相关 的 基础 知识 ， 
其 中 重点 讲解 了 选择 器 的 功能 。 

第 2 篇 ”基于 CSS 3 的 Web 界 面 设计 实战 〈 第 3~7 章 ) 

本 篇 主要 介绍 了 基于 CSS 3 的 Web 页 面 设计 ， 涉 及 文字 、 背 景 、 边 框 、 盒 布局 、 多 列 
布局 、 动 画 、 渐 变 、 支 持 多 种 设备 的 样式 表 等 内 容 ， 尤 其 重点 介绍 了 CSS 3 在 Web 页 面 设 
计 方 面 新 增 的 很 多 有 用 的 功能 。 学 完 本 篇 ， 便 可 以 设计 非常 精美 的 网 页 了 ， 如 阴影 、 圆 角 
等 设计 将 变 得 非常 简单 。 


第 3 篇 ”基于 HTML 5 的 Web 应 用 开发 实战 (第 8~17 章 ) 


本 篇 主要 介绍 基于 HTML 5 的 Web 应 用 开发 ， 尤 其 重点 介绍 HIML 5 新 增 的 Web 应 
用 功能 , 主要 包括 绘图 、 多 媒体 、 表 单 、 拖 放 、 消 息 传递 、 本 地 存储 、 离 线 应 用 、WebSocket 
通信 、 多 线程 、 地 理 位 置 等 。 本 篇 的 每 章 都 是 一 个 完整 的 模块 ， 掌 握 了 这 些 内 容 ， 可 以 开 
发 比较 复杂 的 Web 应 用 。 


光盘 内 容 


口 本 书 重 点 内 容 的 教学 视频 ; 


前 言 


口 本 书 实例 涉及 的 源 代码 。 
对 读者 的 建议 

口 学 习 Web 前 端 开发 , 首先 要 从 整体 上 了 解 Web 前 端 涉及 的 东西 , 然后 逐一 掌握 各 
种 技术 ， 一 一 击破 。 

口 本 书 提供 了 独特 的 内 容 架 构 ， 建 议 新 手 从 头 开始 顺 次 逐 章 阅读 ， 尽 量 不 要 跳跃 。 
有 基础 的 人 可 以 根据 自己 的 需要 有 选择 性 地 阅读 。 

口 本 书 每 章 讲解 的 主题 都 结合 了 实例 ， 对 于 这 些 例子 ， 一 定 要 亲自 动手 做 一 做 ， 才 
能 理解 得 更 深刻 。 

口 对 于 重点 、 难 点 内 容 ， 建 议 读者 结合 本 书 的 配套 教学 视频 阅读 ， 效 果 更 佳 。 


本 书 读者 对 象 


口 
口 
口 
口 
口 


Web 前 端 开发 人 员 ; 
Web 设计 与 开发 爱好 者 ; 
网 页 设计 与 开发 人 员 ; 
各 大 中 专 院 校 的 学 生 ; 
培训 班 的 学 员 。 


本 书 作者 


本 书 由 杨 习 伟 主 笔 编写 。 其 他 参与 编写 的 人 员 有 毕 梦 飞 、 蔡 成 立 、 陈 涛 、 陈 晓 莉 、 陈 
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娟 、 刘 大 林 、 刘 惠 萍 、 刘 水 珍 。 在 此 表示 感谢 ! 
阅读 本 书 的 过 程 中 若 有 疑问 ,请 发 邮件 和 我 们 联系 。E-mail: bookservice2008@163.com。 
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第 1 章 HTML S 标准 


HTML 5 是 下 一 代 HTML 的 标准 ， 目 前 仍然 处 于 发 展 阶段 。 经 过 了 Web 2.0 时 代 ， 基 
于 互联 网 的 应 用 已 经 越 来 越 丰 富 ， 同 时 也 对 互联 网 应 用 提出 了 更 高 的 要 求 。 今 天 ， 技 术 人 
员 、 设 计 者 、 互 联网 爱好 者 都 在 热 议 HTML 5，HTML 5 全 然 已 经 成 为 互联 网 领域 最 热门 
的 词语 .与 HTML 4 相 比 , HTML 5 的 发 展 有 着 革命 性 的 进步 。 基 于 良好 的 设计 理念 , HTML 
5 不 但 增加 了 很 多 新 功能 ， 而 且 对 于 涉及 的 每 一 个 细节 都 有 着 明确 的 规定 。HTML 5 正在 
引领 时 代 的 潮流 ， 必 将 开创 互联 网 的 新 时 代 。 


1.1 _ HTML 5 介绍 


在 学 习 HTML 5 之前， 我 们 先 介绍 一 下 HTML 5 的 来 龙 去 脉 。 
1.1.1 HTML 5 的 历史 背景 


HTML 的 出 现 由 来 已 久 。1993 年 ，HTML 首次 由 因特网 工程 任务 组 (IETF〉 以 因 特 
网 草案 的 形式 发 布 。 接 着 ，HTML 的 发 展 一 路 高 歌 : 1995 年 发 布 了 2.0 版 ，1996 年 发 布 了 
3.2 版 ，1997 年 发 布 了 4.0 版 ，1999 年 12 月 发 布 了 4.01 版 。 从 第 三 个 版 本 (3.2 版 ) 开始 ， 
W3C (万 维 网 联盟 ) 开始 接手 ， 并 负责 后 续 版 本 的 制定 工作 。 

在 HIML 4.01 之 后 ，W3C 的 认识 发 生 了 倒退 ， 把 发 展 HIML 放 在 了 次 要 地 位 ， 而 把 
主要 注意 力 转移 到 了 XML 和 XHTML 之 上 。 由 于 当时 正 值 CSS 崛起 , 设计 者 们 对 于 XHTML 
的 发 展 深信 不 疑 。 但 随 着 互联 网 的 发 展 ，HTML 迫切 需要 增加 一 些 新 的 功能 ， 制 定 新 的 
规范 。 

为 了 能 继续 深入 发 展 HIML 规范 , 在 2004 年 , 一 些 浏览 器 厂商 联合 成 立 了 WHATWG 
(Web 超 文 本 技术 工作 小 组 ) ， 以 推动 HTML 5 规范 。 最 初 ，WHATWG 的 工作 内 容 包 含 
两 个 部 分 : Web Forms 2.0 和 Web Apps 1.0。 它们 都 是 对 HTML 的 发 展 ， 并 被 纳入 HIML 5 
的 规范 之 中 。Web 2.0 也 是 在 那个 时 候 提 出 来 的 。 

2006 年 ，W3C 组 建 了 新 HIML 的 工作 组 ， 非 常 明智 地 采纳 了 WHATWG 的 意见 ， 于 
2008 年 发 布 了 HTML 5 的 工作 草案 。2009 年 W3C 停止 了 对 XHTML 2 的 工作 。 紧 接着 ， 
HTML 5 的 草案 不 断 地 更 新 。2010 年 ，HTML 5 开始 进入 众多 开发 者 的 视野 。 在 HTML 5 
规范 还 没 定稿 的 情况 下 , 各 大 浏览 器 厂商 就 已 经 按 捧 不 住 了 , 纷纷 参与 到 规范 的 制定 中 来 ， 
并 对 自己 旗下 的 产品 进行 升级 以 支持 HIML 5 的 新 功能 。 

HIML 5 规范 涉及 的 内 容 非常 多 ， 众 多 浏览 器 厂商 的 参与 使 得 可 以 及 时 获得 一 些 实验 
性 的 反馈 ，HTML 5 规范 也 得 以 持续 的 完善 。 与 此 同时 ，IETF 制定 相关 通信 协议 。HTML 
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5 就 是 以 这 种 方式 快速 地 融入 到 Web 开发 平台 当中 。 
1.1.2 HTML 5 的 现状 

今天 ， 几 乎 所 有 最 新 版 的 浏览 器 都 已 经 在 不 同 程度 上 支持 HIML 5， 开 发 者 也 可 以 尝 
试 开 发 基于 HTML 5 的 新 功能 了 。 

1.， 两 个 发 展 的 时 间 点 


HTML 5 规范 仍然 处 于 草案 更 新 之 中 ， 但 是 最 新 的 草案 已 经 相对 比较 完备 了 。HITML 
规范 的 发 布 有 两 个 时 间 点 ， 如 图 1-1 所 示 。 


2012 2 
发 布 候选 推荐 版 。 发布 计划 推荐 版 


图 1-1 HTML 5 规范 的 发 布 时 间 点 


第 一 个 时 间 点 是 2012 年 ， 目 标 是 发 布 “ 候 选 推荐 版 ”; 第 二 个 时 间 点 是 2022 年 ， 目 
标 是 发 布 “ 计 划 推 荐 版 ”。 

也 许 你 会 认为 ， 既 然 要 到 2022 年 ， 那 就 等 十 年 再 说 吧 。 这 是 非常 错误 的 想法 ， 你 需 
要 先 明 白 这 两 个 时 间 点 的 真正 含义 再 下 结论 。 

首先 是 2012 年 ， 这 是 最 重要 的 时 间 点 ， 因 为 这 一 年 要 发 布 候选 推荐 版 。 一 个 规范 如 
果 要 成 为 候选 推荐 标准 (REC) ， 它 需要 具备 百分之百 的 可 实施 性 ， 只 有 成 功 通过 上 万 项 
的 测试 案例 后 才能 验证 这 一 点 。 据 保守 估计 ， 整 个 规范 可 能 需要 进行 2 万 项 测试 。 

其 次 是 2022 年 ， 这 一 年 要 发 布 计划 推荐 版 。 那 个 时 候 ， 至 少 会 有 两 大 浏览 器 会 完全 
支持 HTML 5 的 所 有 特性 。 如 果 考 虑 到 HTML 5 标准 的 规模 ， 这 个 日 期 还 是 太 乐 观 了 。 毕 
竟 之 前 发 布 的 HTML 4.01 已 经 经 过 十 多 年 都 没 能 实现 这 一 目标 。 

按照 此 说 法 , 在 两 大 浏览 器 支持 所 有 的 功能 之 前 , HTML 5 的 规范 是 没有 最 终 定稿 的 。 
如 果 你 真 的 等 十 年 之 后 再 来 学 习 ， 就 悔 之 晚 侨 。 


2. 目前 发 展 状况 


首先 ， 各 大 浏览 器 都 已 经 积极 支持 HTML 5 的 新 功能 。 各 大 浏览 器 厂商 不 仅 积极 地 支 
持 HTML 5 规范 ， 而 且 还 参与 到 HITML 5 规范 的 制定 之 中 。 真 正 重要 的 一 小 部 分 HTML 5 
新 特性 已 经 得 到 浏览 器 的 支持 。 所 有 浏览 器 对 HIML 5 的 支持 情况 ， 都 会 在 一 周 之 内 发 生 
变化 ， 因 为 浏览 器 制作 厂商 的 创新 速度 也 非常 快 。 

其 次 ， 目 前 已 经 存在 很 多 基于 HTML 5 的 应 用 了 。 有 些 网 站 明确 表示 支持 HTML 5， 
并 提示 用 户 升级 浏览 器 , 很 多 网 络 应 用 也 已 经 为 HIML 5 的 到 来 做 了 充分 的 准备 。2012 年 
是 HIML 5 真正 发 力 的 开始 ， 而 且 对 于 移动 应 用 优势 非常 明显 。 


3. HTML 5 的 开发 组 织 


HTML 5 最 初 是 由 WHATWG 推动 开发 的 , 到 了 今天 , 已 经 有 三 个 重要 的 组 织 参 与 进来 。 
口 WHATWG: 由 来 自 Apple、Mozilla、Opera、Google 等 浏览 器 厂商 的 人 员 组 成 ， 
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成 立 于 2004 年 。 负 责 开 发 HTML 和 Web 应 用 API， 并 提供 了 开放 式 的 合 

口 W3C: W3C 下 辖 的 HTML 工作 组 负责 发 布 HTML 5 规范 。 

口 IETF: 因特网 工程 任务 组 下 辖 的 HITP 等 负责 Intemet 协议 的 团队 。 其 中 HTML 5 
定义 的 一 个 新 功能 WebSocket API 就 依赖 于 新 的 WebSocket 协议 ， 这 个 协议 正 是 
由 IETF 开发 的 。 


1.1.3 ”良好 的 设计 理念 


回顾 HTML 的 发 展 历程 ， 曾 经 出 现 了 XHTML 规范 ,但 没有 得 到 较 好 的 发 展 ,特别 是 
XHTML 2， 对 语法 解析 过 于 严格 ， 严 重地 违背 了 著名 的 Postel 法 则 : “发 送 时 要 保守 ; 接 
收 时 要 开放 ”。 

根据 Postel 法 则 , 对 自己 发 送出 去 的 东西 要 严格 要 求 , 而 对 接收 的 东西 则 要 放松 限制 。 
HTML 5 的 设计 理念 就 遵循 了 这 个 法 则 ， 同 时 HIML 5 也 强调 了 其 兼容 性 、 实 用 性 和 互 操 
作 性 。 


1. 化 繁 为 简 


HTML 5 为 了 做 到 尽 可 能 简化 ， 避 免 了 一 些 不 必要 的 复杂 设计 。 例 如 ，DOCTYPE 的 
改进 : 在 过 去 的 HTML 版 本 中 ， 第 一 行 的 DOCTYPE 过 于 宛 长 ， 没 有 几 个 人 能 记得 住 ， 在 
实际 的 Web 开发 中 也 没有 什么 意义 。 而 在 HTML 5 中 就 非常 简单 : 


<!DOCTYPE html> 


HTML 5 改进 的 方面 如 下 。 

口 简化 了 DOCTYPE。 

口 简化 了 字符 集 声明 。 

口 以 浏览 器 的 原生 能 力 替代 脚本 代码 的 实现 。 

口 简单 而 强大 的 HTML 5 API。 

为 了 让 一 切 变 得 简单 ，HTML 5 可 谓 下 足 了 功夫 。 为 了 避免 造成 误解 ，HITML 5 对 每 
一 个 细节 都 有 着 非常 明确 的 规范 说 明 ， 不 允许 有 任何 的 歧义 和 模糊 出 现 。 

2. 向 下 兼容 


遵循 Postel 法 则 ，HTML 5 有 着 很 强 的 兼容 能 力 。 在 这 方面 ，HTML 5 没有 颠覆 性 的 
革新 ， 允 许 存在 不 严谨 的 写法 ， 例 如 ， 一 些 标签 的 属性 值 没 有 使 用 引号 括 起 来 ， 标 签 属性 
中 包含 大 写字 母 ， 有 的 标签 没有 闭合 等 。 然 而 这 些 不 严谨 的 错误 处 理 方案 ， 在 HIML 5 的 
规范 中 都 有 着 明确 的 规定 ,也 希望 未 来 在 浏览 器 中 有 一 致 的 支持 。 当 然 对 于 Web 开发 者 来 
说 ， 还 是 严谨 一 点 好 。 

对 于 HIML 5 的 一 些 新 特性 ， 如 果 旧 的 浏览 器 不 支持 ， 也 不 会 影响 页 面 的 显示 。 在 
HTML 5 的 规范 中 ， 也 考虑 了 这 方面 的 内 容 。 如 在 HIML 5 中 input 标签 的 type 属性 增加 
了 很 多 类 型 ， 当 浏览 器 不 支持 这 些 类 型 时 ， 默 认 会 将 其 视 为 text， 实 现 了 优雅 的 降级 。 


3. 支持 合理 存在 的 内 容 
HTML 5 的 设计 者 们 花费 了 大 量 的 精力 来 研究 通用 的 行为 。 例 如 ，Google 分 析 了 上 百 
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万 的 页 面 ， 从 中 提取 了 DIV 标签 的 了 D 名 称 。 例 如 很 多 人 都 是 这 样 标记 导航 区 域 的 : 
<div id="nav"> 
// 导 航 区 域内 容 
</div> 
既然 该 行为 已 经 大 量 存在 ，HTML 5 就 会 想 办 法 去 改进 ， 所 以 就 直接 增加 了 一 个 nav 
标签 ， 用 于 导航 区 域 。 


4. 解决 实用 性 的 问题 


对 于 HTML 无 法 实现 的 一 些 功能 , 用 户 会 寻求 其 他 方法 来 实现 , 如 对 于 绘图 、 多 媒体 、 
地 理 位 置 、 实 时 获取 信息 等 应 用 ， 通 常会 开发 一 些 相应 的 插件 间接 地 去 实现 。HTML 5 的 
设计 者 们 研究 了 这 些 需 求 ， 开 发 了 一 系列 用 于 Web 应 用 的 接口 。 

HTML 5 规范 的 制定 是 非常 开放 的 ， 所 有 人 都 可 以 获取 草案 的 内 容 ， 也 可 以 参与 进来 
提出 宝贵 的 意见 。 因 为 开放 ,所 以 可 以 得 到 更 加 全 面 的 发 展 。 一 切 以 用 户 需求 为 最 终 目 的 ， 
用 户 需要 什么 ， 它 就 规范 什么 。 所 以 ， 当 你 在 使 用 HTML 5 的 新 功能 时 ， 会 发 现 正 是 期 待 
已 久 的 东西 。 


5. 最 终 用 户 优先 


这 个 设计 理念 本 质 上 是 一 种 解决 冲突 的 机 制 。 在 遇 到 无 法 解决 的 冲突 的 时 候 ， 规 范 会 
把 最 终 用 户 的 诉求 放 在 第 一 位 。 因 此 ，HTML 5 的 绝 大 部 分 功能 都 是 非常 实用 的 。HTML 5 
规范 的 制定 遵循 如 下 的 优先 顺序 : 

用 户 > 编写 HTML 的 开发 者 > 浏览 器 厂商 > 规范 制定 者 > 理论 的 存 粹 性 


可 见 ， 用 户 与 开发 者 的 重要 性 要 远 远 高 于 规范 和 理论 。 例 如 ， 有 很 多 用 户 都 需要 实现 
一 个 新 的 功能 ，HTML 5 规范 设计 者 们 会 研究 这 种 需求 ， 并 纳入 规范 ，HTML 5 规范 了 一 
套 错误 处 理 机 制 ， 以 便当 Web 开发 者 写 了 不 够 严谨 的 代码 时 ， 接 纳 这 种 不 严谨 的 做 法 。 
所 以 ， 当 你 在 使 用 HTML 5 时 ， 会 发 现 它 比 以 前 的 版 本 友好 多 了 。 
6. 通用 访问 
这 个 原则 可 以 分 成 如 下 三 个 方面 。 
口 可 访问 性 : HTML 5 考虑 了 残障 用 户 的 需求 ， 以 屏幕 阅读 器 为 基础 的 元 素 也 已 经 被 
添加 到 规范 当中 。 
口 媒体 中 立 : HTML 5 规范 不 仅仅 是 为 某 些 浏 览 器 而 设计 的 。 也 许 有 一 天 ，HTML 5 
的 新 功能 在 不 同 的 设备 和 平台 上 都 能 运行 。 
口 支持 所 有 语种 : 例如 ， 新 的 <ruby> 元 素 支持 在 东亚 页 面 的 排版 中 会 用 到 的 Ruby 
注释 。 


1.1.4 新 增 的 HTML 5 原生 功能 


1. 新 增 的 原生 功能 
Web 应 用 程序 是 HTML 5 中 最 大 的 亮点 , 它 原 生地 支持 了 一 些 只 有 在 桌面 应 用 中 才能 
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实现 的 功能 。 这 些 功能 主要 如 下 。 
Canvas 绘图 (2D 和 3D)。 
Channel 消息 传送 。 

跨 文 档 消息 传送 。 

地 理 位 置 。 

WebSocket API 及 其 协议 。 
本 地 存储 。 

本 地 数据 库 。 

Web 工作 线程 。 

跨 域 的 异步 请 求 。 
离线 应 用 。 
这 些 功能 都 有 着 独立 的 规范 ， 并 且 从 属于 HTML 5。 


2. 原生 功能 的 优点 


在 过 去 ， 很 多 功能 只 能 通过 安装 插件 才能 够 实现 。 插 件 的 方式 会 存在 很 多 问题 。 
插件 需要 安装 ， 且 安装 过 程 可 能 失败 。 
插件 可 能 会 被 屏蔽 或 禁用 。 
插件 本 身 存在 安全 隐患 。 
插件 不 容易 与 HTML 文档 的 其 他 部 分 集成 。 
插件 的 开发 ， 对 开发 者 的 技能 要 求 进一步 提高 。 
而 HTML 5 的 原生 功能 ， 让 这 些 功能 的 实现 变 得 简单 ， 不 需要 安装 不 安全 的 插件 ， 而 
且 能 与 页 面 中 的 其 他 元 素 无 颖 集成 ， 安 全 性 也 提高 了 很 多 。 


DoOOoOoOOOOODO 


OOODODOD 


1.1.5 _ HTML 5 带 来 的 好 处 


对 于 用 户 和 开发 者 而 言 HTML 5 的 出 现 意义 非常 重大 。 因 为 它 将 解决 之 前 Web 页 面 
存在 的 诸多 问题 。 

首先 ， 不 必 考 虑 各 个 浏览 器 的 兼容 性 问题 。 

在 HTML 5 之前， 各 大 浏览 器 厂商 为 了 争夺 市 场 占有 率 ， 会 在 各 自 的 浏览 器 中 增加 各 
种 各 样 的 功能 ， 并 且 不 具有 统一 的 规范 。 对 于 用 户 而 言 ， 使 用 不 同 的 浏览 器 ， 常 常会 看 到 
不 同 的 页 面 效果 ， 甚 至 有 些 功能 根本 不 能 使 用 ，Web 开发 者 也 伤 透 脑筋 ， 为 了 使 页 面 能 在 
多 个 浏览 器 中 正常 使 用 ， 不 得 不 写 一 些 hack， 徒 增 了 Web 开发 的 复杂 度 。 

在 HTML 5 中 ， 纳 入 了 所 有 合理 的 扩展 功能 。HTML 5 规范 的 内 容 也 非常 庞大 ， 各 大 
浏览 器 厂商 关注 的 是 自己 的 产品 能 否 更 好 地 支持 HIML 5。 这 样 ， 只 要 是 基于 HTML 5 开 
发 的 Web 应 用 ， 都 能 够 在 浏览 器 中 正常 显示 (不 过 ， 现 在 还 不 能 完全 这 样 做 〉。 

其 次 ， 可 以 实现 复杂 的 Web 应 用 。 

在 HIML 5 之 前 ，HTML 与 Web 应 用 程序 的 关系 十 分 薄弱 。 与 强大 的 桌面 应 用 程序 
的 功能 相 比 ，Web 应 用 程序 的 功能 是 微不足道 的 ， 并 上 且 在 很 多 方面 都 做 了 限制 。 

在 HIML 5 中 , 不 但 大 大 扩展 了 Web 应 用 的 功能 , 而 且 安 全 性 也 有 了 明确 的 规范 。 各 
大 浏览 器 也 争 相 封装 了 这 些 功 能 ， 目 前 已 经 可 以 使 用 HIML 5 开发 富 Web 应 用 了 。 


。6。 
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1.2 全 新 的 HTML 5 


下 面 让 我 们 快速 预览 一 下 HIML 5 的 新 功能 。 
1.2.1 从 “ 头 ” 说 起 


这 里 所 说 的 是 HTML 文件 的 开头 部 分 。HTML 5 避免 了 不 必要 的 复杂 性 ，DOCTYPE 
和 字符 集 都 极 大 地 简化 了 。 


1. 简化 的 DOCTYPE 声 明 
DOCTYPE 声明 是 HIML 文件 中 必 不 可 少 的 内 容 , 它 位 于 文件 的 第 一 行 ,声明 了 HTML 
文件 遵循 的 规范 。 声 明 HTML 4.01 版 的 DOCTYPE 代码 为 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/htm14/1oose.dtd"> 


这 么 长 的 一 串 代 码 恐 怕 极 少 有 人 能 够 默写 出 来 , 通常 都 是 通过 复制 /粘贴 的 方式 添加 这 
段 代 码 。 而 在 HTML 5 中 的 DOCTYPE 代码 则 非常 简单 : 

<!DOCTYPE html> 

现在 好 记得 多 了 ， 可 以 告别 复制 /粘贴 的 时 代 了 。 同 时 这 种 声明 ， 也 标志 性 地 让 人 感觉 
到 这 是 符合 HTML 5 规范 的 页 面 。 如 果 使 用 了 HTML 5 的 DOCTYPE 声明 ， 则 会 触发 浏览 
器 以 标准 兼容 的 模式 来 显示 页 面 。 

2. 简化 的 字符 集 声明 

字符 集 的 声明 也 是 非常 重要 的 ， 它 决定 了 页 面 文件 的 编码 方式 。 在 过 去 ， 都 是 使 用 如 
下 的 方式 来 指定 字符 集 的 : 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

HTML 5 把 它 简 化 成 了 : 


<meta charset="utf-8" /> 


在 HTML 5 中 , 以 上 两 种 方式 都 可 以 使 用 , 这 是 由 HTML 5 的 向 下 兼容 的 原则 决定 的 。 


1.2.2 ”明确 简洁 的 结构 


个 非常 典型 的 页 面 设计 中 通常 会 包含 头 部 、 页 脚 、 导 航 、 主 体内 容 和 侧 边 内 容 等 区 
域 。Google 从 上 百 万 的 网 页 中 分 析 了 其 存在 的 合理 性 ， 例 如 ， 头 部 区 域 通常 使 用 : 


<div id="header"> 


// 页 丑 
</div> 
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针对 这 种 情况 ，HIML 5 引入 了 与 文档 结构 相关 联 的 结构 元 素 ， 如 表 1.1 所 示 。 


表 1.1 HTML 5 中 的 结构 元 素 


元 素 名 称 描述 说 明 
header 标记 头 部 区 域 的 内 容 
footer 标记 页 脚 区 域 的 内 容 
section Web 页 面 中 的 一 块 区 域 
article 独立 的 文章 内 容 区 域 
aside 相关 侧 边 内 容 或 者 引文 区 域 
nav 导航 类 内 容 区 域 


下 面 我 们 就 使 用 这 几 个 新 的 结构 元 素来 构建 一 个 新 型 的 博客 页 面 ， 并 且 使 用 前 面 介 绍 
的 DOCTYPE 和 字符 集 。 
【示例 1-1】 HTML 5 页 面 结构 示例 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>HTML 5 示例 </title> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="Codel-1.css" /> 
</head> 
<body> 
<header> 
<h1> 清 茶 博 客 </h1> 
<p> 喝 一 杯 清茶 ， 约 三 五 知己 ， 聊 聊天 ， 叙 叙旧 . . .</p> 
</header> 
<nav> 
<ul> 
<1i><a href="#"> 首 页 </a></1i> 
<1i><a href="#"> 博 客 </a></1i> 
<1i><a href="#"> 相 册 </a></1i> 
<1i><a href="#"> 个 人 档案 </a></1i> 
</ul> 
</nav> 
<div id="container"> 
<section> 
<article> 
<header> 
<h1>HTML 5</h1> 
</header> 
<p>HTML 5 是 下 一 代 HTML 的 标准 ， 目 前 仍然 处 于 发 展 阶段 。 经 过 了 Web2 .0 时 代 ， 基 于 
互联 网 的 应 用 已 经 越 来 越 丰富 ， 同 时 也 对 互联 网 应 用 提出 了 更 高 的 要 求 。</p> 
<footer> 
<p> 编 辑 于 2012.1.18</p> 
</footer> 
</article> 
<article> 
<header> 
<h1>CSS3</h1> 
</header> 
<p> 对 于 前 端 设计 师 来 说 ， 虽然 CSS3 不 全 是 新 的 技术 ， 但 它 却 重启 了 一 扇 奇 思 妙 想 的 窗口 。 
</p> 
<footer> 
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<p> 编 辑 于 2012.1.19</p> 
</footer> 
</article> 
</section> 
<aside> 
<article> 
<h1> 简 介 </h1> 
<p>HTML 5 和 CSS3 正在 掀起 一 场 变革 ， 它 不 是 在 替代 Flash， 而 是 正在 发 展 成 为 开放 的 
Web 平台 ， 不 但 在 移动 领域 建功 卓著 ， 而 且 对 传统 的 应 用 程序 发 起 挑战 。</p> 
</article> 
</aside> 
<footer> 
<p> 版 权 所 有 2012</p> 
</footer> 
</div> 
</body> 
</html> 


如 示例 1-1 所 示 的 代码 ， 与 HTML 5 之 前 的 页 面 布 满 div 标签 相 比 ， 已 经 变 得 清晰 了 
很 多 。 涉及 的 各 种 头 部 , 我 们 都 会 将 其 包含 在 header 标签 内 , 各 种 结尾 内 容 都 会 使 用 footer 
标签 包含 ， 导 航 菜单 放 在 nav 标签 内 ， 主 要 内 容 放 在 section 标签 内 ， 独 立 的 文章 部 分 放 在 
article 标签 内 ， 相 关 的 简介 等 内 容 放 在 侧 边 标签 aside 内 。 

示例 1-1 中 引用 了 一 个 CSS 文件 (Codel-l.css), 这 里 我 们 不 再 展示 CSS 文件 内 容 (我 
们 会 提供 相应 的 源 代码 供 读者 学 习 之 用 ) 。 运 行 结果 如 图 1-2 所 示 。 


Omms 示 例 
fs © | yxr740:8080/hc/Chapter1/Codel-1. htnl# 


清茶 博客 


约 三 五 知己 ， 驳 易 天 ， 斤 叙旧 .… 
首页 博客 。 相册 个 人 档案 


HTML5 简介 


HTML5 是 下 一 代 HTML 的 标准 ， 目 前 仍然 处 于 发 展 阶段 。 经 过 了 VYeb2.0 时 代 ， HTML5 和 CSS3 正 


基于 互联 网 的 应 用 已 经 越 来 越 丰富， 同时 也 对 互联 网 应 用 提出 了 更 高 的 要 求 。 在 掀起 一 场 变革 ， 


i 它 不 是 在 交代 

sd Flash， 而 是 正在 
发 展 成 为 开放 的 
Web 平 台 ， 不 但 
在 移动 领域 建功 总 
著 ， 而 且 对 传统 的 
应 用 程序 发 起 挑 
战 。 


编辑 于 2012.1.19 


版 权 所 有 2012 


图 1-2 新 型 的 HTML 5 页 面 结构 


使 用 这 些 用 于 结构 布局 的 元 素 , 在 设计 样式 表 的 时 候 ， 不 用 再 添加 标签 的 记 特性 作为 
。9 。 
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选择 器 了 ， 而 是 直接 针对 标签 进行 设计 ， 因 为 标签 已 经 具有 一 定 的 语义 。 


23 


新 增 的 元 素 


上 一 节 介 绍 了 HTML 5 中 的 一 些 结构 化 的 元 素 ， 使 得 页 面 布局 耳目 一 新 。 本 节 将 全 面 
介绍 HTML 5 中 新 增 的 元 素 。HTML 5 新 增 了 很 多 新 的 有 意义 的 标签 ， 为 了 方便 记忆 ， 我 


们 对 它们 进行 了 分 类 。 
1. 结构 片段 
口 article: 标识 独立 的 主体 内 容 区 域 ， 可 用 于 论坛 帖子 、 报 纸 文章 、 博 客 条 目 、 用 户 


| 加 加 | 


恒 量 上 昌 晶 上 介 闫 刘 


| | 


OOO0O 


评论 等 。 

aside: 标识 非 主 体内 容 区 域 ， 该 区 域 中 的 内 容 应 该 与 附近 的 主体 内 容 相关 。 
section: 标识 文档 的 小 节 或 部 分 。 

footer: 标识 页 面 的 页 脚 ， 或 内 容 区 块 的 脚注 。 

header: 标识 页 面 的 页 首 ， 或 内 容 区 块 的 标 头 。 

nav: 标识 页 面 的 导航 区 块 。 


进度 信息 


meter: 根据 value 属性 赋值 和 最 大 、 最 小 值 的 度量 进行 显示 的 进度 条 状 条 形 图 。 
progress: 标识 任务 进度 显示 的 进度 条 。 


交互 性 元 素 


command: 标识 一 个 命令 元 素 〈( 单 选 、 复 选 或 者 按钮 ); 当 且 仅 当 这 个 元 素 出 现 
在 <menu> 元 素 里 面 时 才 会 被 显示 ， 否 则 将 只 能 作为 键盘 快捷 方式 的 一 个 载体 。 
datalist; 标识 一 个 选项 组 ， 与 input 元 素 配 合 使 用 该 元 素 ， 来 定义 input 可 能 的 值 。 


内 翌 应 用 元 素 及 辅助 元 素 


audio: 定义 声音 ， 如 音乐 或 其 他 音频 流 。 

video: 定义 视频 ， 如 电影 片段 或 其 他 视频 流 。 

source: 为 媒介 元 素 ( 如 video 和 audio) 定义 媒介 资源 。 

track: 为 诸如 video 元 素 之 类 的 媒介 规定 外 部 文本 轨道 。 

canvas: 定义 图 形 ， 比 如 图 表 和 其 他 图 像 。 该 标签 只 是 图 形容 器 ， 必 须 使 用 脚本 来 
绘制 图 形 。 

embed: 标识 来 自 外 部 的 互动 内 容 或 插件 。 


. 在 文档 和 应 用 中 使 用 的 元 素 


details: 标识 描述 文档 或 文档 某 个 部 分 的 细节 。 

summary: 标识 <details> 元 素 的 标题 。 

figcaption: 标识 figure 元 素 的 标题 。 

figure: 标识 一 块 独立 的 流 内 容 (图像 、 图 表 、 照 片 、 代 码 等 )。 
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口 hgroup: 标识 文档 或 内 容 的 多 个 标题 。 用 于 将 hl 一 h6 元 素 打包 ， 优 化 页 面 结构 在 
SEO 中 的 表现 。 


6. ruby 标 签 


口 ruby: 标识 mby 注释 (中 文 注音 或 字符 ) 。 在 东亚 使 用 ， 显 示 的 是 东亚 字符 的 发 音 。 

口 Ip: 在 ruby 注释 中 使 用 ， 以 定义 不 支持 ruby 元 素 的 浏览 器 所 显示 的 内 容 。 

口 rt: 标识 字符 (中 文 注音 或 字符 〉 的 解释 或 发 音 。 

7. 文本 和 文本 标记 元 素 

口 bdi: 允许 设置 一 段 文本 ， 使 其 脱离 其 父 元 素 的 文本 方向 设置 。 

口 mark: 标识 需 高 亮 显示 的 文本 。 

口 time: 标识 日 期 或 时 间 。 

口 output: 标识 一 个 输出 的 结果 。 

8. 其 他 

口 keygen: 标识 表单 密 钥 生 成 器 元 素 。 当 提交 表单 时 ， 私 钥 存 储 在 本 地 ， 公 钥 发 送 
到 服务 器 。 

口 wbr: 标识 单词 中 适当 的 换行 位 置 ， 可 以 用 此 标签 为 一 个 长 单词 指定 合适 的 换行 
位 置 。 


1.2.4 ”废弃 的 元 素 


HTML 5 也 删除 了 一 些 元 素 ， 主 要 是 以 下 几 个 方面 的 元 素 。 
1. 能 使 用 CSS 方 案 替 代 的 元 素 


在 HTML 5 之 前 的 一 些 元 素 中 ， 有 一 部 分 是 纯粹 用 作 显 示 效 果 的 元 素 。 而 HTML 5 延 
续 了 内 容 与 表现 的 分 离 ， 对 于 显示 效果 更 多 地 交 给 CSS 去 完成 。 所 以 ， 在 这 方面 废除 的 元 


素 有 : basefont、big、center、font、s、strike、tt、u。 
2. 不 再 支持 frame 框 架 


由 于 frame 框架 对 网 页 可 用 性 存在 负面 影响 ， 因 此 在 HIML 5 中 已 经 不 支持 frame 框 
架 ， 但 支持 过 ame 框架 。 所 以 HIML 5 删除 了 frame 框架 中 的 frameset、frame、noframes 
元 素 。 

3. 其 他 被 废除 的 元 素 


其 他 元 素 被 废除 的 原因 通常 都 是 有 了 较 好 的 替代 方案 。 
口 废除 的 applet 元 素 ， 可 由 embed 和 object 元 素 替 代 。 
口 废除 的 bgsound 元 素 : 可 由 audio 替代 。 

口 废除 的 marquee 元 素 : 可 由 JavaScript 编程 方式 替代 。 
口 废除 的 了 元素 : 可 由 mby 元 素 蔡 代 。 
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废除 的 acronym 元 素 : 可 由 abbr 元 素 替 代 。 

废除 的 dir 元 素 : 可 由 纪元 素 替 代 。 

废除 的 isindex 元 素 : 可 以 使 用 form 元 素 和 input 元 素 相 结合 的 方式 替代 。 
废除 的 listing 元 素 : 可 由 pre 元 素 替 代 。 

废除 的 xmp 元 素 : 可 由 code 元 素 替 代 。 

废除 的 nextid 元 素 : 可 由 GUIDS 蔡 代 。 

口 废除 的 plaintext 元 素 : 可 由 “text/plain”MIME 类 型 替代 。 

在 HTML 5 继续 完善 的 过 程 中 ， 可 能 还 会 废除 其 他 不 合理 的 元 素 。 


加 盏 四.. 钙 .下 :所 


1.2.5 全 新 的 选择 器 
HTML 5 极 大 地 增强 了 选择 器 的 功能 。 在 HTML 5 之 前 ， 如 果 要 在 页 面 中 查找 特定 元 
素 , 只 能 使 用 三 个 函数 : getElementById()、getElementsByName()、getElementsByTagName()。 
1. 根据 类 名 匹配 元 素 (DOM API) 


HTML 5 新 增 了 getElementsByClassName0 〇 函数， 是 根据 类 日 匹配 元 素 的 , 返回 的 是 匹 
配 到 的 数组 ， 无 匹配 则 返回 空 的 数组 。 


var els = document .getElementsByClassName ('section'); 


支持 浏览 器 : IE9、Firefox 3.0+、Safari 3.2+、Chrome 4.0+、Opera 10.1+。 
2. 根据 CSS 选 择 器 匹配 元 素 (Selectors API) 


HTML 5 还 提供 了 两 个 根据 CSS 选择 器 匹配 元 素 的 函数 : querySelector0 和 query 
SelectorAll()。 

querySelector0 返 回 匹配 到 的 第 一 个 元 素 ， 如 果 没 有 匹配 则 返回 null。 

Var els document .querySelector ("ul li:nth-child(odd)"); 


Var els = document .querySelector ("table.test > tr > td"); 
Var els = document .querySelector(".classl1l",”.class2”); 


querySelectorAll0 返 回 所 有 匹配 到 的 元 素数 组 ， 如 果 没 有 匹配 则 返回 空 的 数组 。 
Var els document .querySelectorAll ("ul li:nth-child(odd)"); 


Var els = document .querySelectorAll ("table.test > tr > td"); 
Var els = document. querySelectorAll (".classl",".class2"); 


querySelector0 和 querySelectorAll0 函 数 的 参数 可 以 接受 两 个 或 两 个 以 上 ， 只 要 满足 任 
何 一 个 条 件 都 是 有 效 的 。 支 持 浏览 器 : IE8+、Firefox 3.5+、Safari 3.2+、Chrome 4.0+、Opera 
10.1+。 


1.2.6 脚本 日 志和 调试 


JavaScript 脚本 的 调试 一 直 都 是 这 个 开发 语言 的 薄弱 之 处 。 基 于 HIML 5 的 应 用 开发 ， 
会 大 量 使 用 JavaScript 脚本 ， 所 以 如 何 调试 这 些 代码 变 得 非常 重要 。 所 幸 脚本 日 志 功 能 会 


= 
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给 开发 人 员 带 来 很 多 便利 。 
1. 脚本 日 志 
脚本 日 志 使 用 的 是 console.log0 函 数 ， 把 信息 输出 到 控制 台 。 使 用 方法 如 下 : 


console.log ("Hello World!"); 
console.1log (document); // 输 出 document 对 象 


可 以 输出 字符 串 ， 也 可 以 输出 对 象 。 如 果 输 出 的 是 对 象 ， 在 控制 台 可 以 查看 该 对 象 的 
详细 信息 。 与 使 用 alert0 输 出 消息 相 比 ，console.log0 的 控制 台 输 出 不 会 阻塞 脚本 的 执行 。 

脚本 日 志 功 能 已 经 成 为 JavaScript 开发 人 员 常 用 的 调试 方法 。 为 了 便于 开发 人 员 查 看 
输出 到 控制 台 的 信息 ， 很 多 浏览 器 都 提供 了 控制 台 查 看 功能 ， 如 图 1-3 所 示 。 


博客 相册 个 人 档案 
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Hello Horld! 
VW HTML Document Codel-1.htnl:56 9 
URL: "http://yxu740:8080/hc/Chapterl/Codel-1.html" 
hant HTHL BodyElement 
alinkCo: 2 
al FTA ALCollect ion n[46] 
anchors: HTKLCollection[e] 
» applets: HTMLCollection[@] 
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baseURI: “http://yxu740:8080/hc/Chapterl/Codel-1.htel" 
bgColor: 
wbody: HTHLBodyElement 
characterset: "UTF-8” 
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图 1-3 Chrome 浏览 器 中 的 开发 者 工具 

2. 脚本 调试 

说 起 脚本 调试 ， 很 多 开发 人 员 会 首先 想到 Firefox 浏览 器 中 的 一 款 Firebug 插件 。 现 在 
很 多 浏览 器 中 ， 也 内 杠 了 具有 相同 功能 的 开发 工具 : Safari 的 Web Inspector、Google 的 
Chrome 开发 者 工具 (Developer Tools) 、 正 的 开发 者 工具 (Developer Tools) ， 以 及 Opera 
的 Dragonfly 等 。 图 1-3 所 示 的 是 Chrome 浏览 器 中 的 开发 者 工具 。 

这 些 开发 者 工具 不 但 能 够 查看 控制 台 ， 而 且 能 够 查看 资源 视图 、 存 储 视图 、 脚 本 调试 
视图 、 时 间 视 图 等 ， 并 且 很 多 开发 者 工具 都 已 经 支持 断 点 调试 的 功能 。 这 些 功能 极 大 地 提 
高 了 开发 人 员 的 开发 效率 。 
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1.3 HTML 5 的 未 来 发 展 


HTML 5 的 未 来 发 展 是 极 具 野心 的 ， 绝 非常 规 的 富 客户 端 应 用 那么 简单 。 
1. 什么 是 RIA 


RIA (Rich Intemet Applications) 即 富 互联 网 应 用 ， 具 有 高 度 互 动 性 、 丰 富 用 户 体验 及 
功能 强大 的 客户 端 。RIA 最 突出 的 特点 就 是 Rich， 它 包含 了 两 层 含义 : 丰富 的 数据 模型 和 
丰富 的 界面 元 素 。 

RIA 技术 提供 了 多 种 数据 模型 来 处 理 客户 端 复杂 的 数据 操作 。 使 用 RIA 可 以 将 部 分 原 
本 需要 在 后 台 程 序 处 理 的 问题 转移 到 客户 端 ， 使 数据 能 够 被 缓存 在 客户 端 ， 从 而 可 以 实现 
一 个 比 基 于 HTML 的 响应 速度 更 快 ， 且 数据 往返 于 服务 器 的 次 数 更 少 的 用 户 界面 。 

RIA 技术 也 提供 了 比 HTML 更 为 丰富 的 界面 表现 元 素 ， 密 集 、 响 应 速度 快 和 图 形 丰 富 
的 页 面 元 素 与 数据 模型 结合 在 一 起 ， 为 用 户 提供 好 的 使 用 体验 。 

RIA 具有 桌面 应 用 程序 的 特点 : 在 消息 确认 和 格式 编排 方面 提供 互动 用 户 界 面 ; 在 无 
刷新 页 面 之 下 提供 快捷 的 界面 响应 时 间 ， 提 供 通用 的 用 户 界 面 特性 如 拖 放 式 〈drag and 
drop) ， 以 及 在 线 和 离线 操作 能 力 。 

RIA 具有 Web 应 用 程序 的 特点 : 立即 部 署 、 跨 平台 、 采 用 逐步 下 载 方式 来 检索 内 容 和 
数据 ， 以 及 可 以 充分 利用 被 广泛 采纳 的 互联 网 标准 。RIA 具有 通信 的 特点 ， 包 括 实 时 互动 
的 声音 和 图 像 。 

客户 端 在 RIA 中 的 作用 不 仅仅 是 展示 页 面 ,还 可 以 在 幕后 与 用 户 请 求 异 步 地 进行 计算 、 
传送 和 检索 数据 、 显 示 集 成 的 用 户 界面 和 综合 使 用 声音 和 图 像 ， 这 一 切 都 可 以 在 不 依靠 客 
户 机 连接 的 服务 器 或 后 端的 情况 下 进行 。 

毫 无 疑问 ，HTML 5 汲取 了 RIA 中 的 技术 特点 ， 并 统一 在 浏览 器 中 实现 。 


2. 与 Flash 和 Silverlight 之 争 


在 HIML 5 之 前 ， 出 现 了 大 批 的 RIA 客户 端 开 发 技术 ， 这 也 直接 威胁 着 HTML 在 互 
联网 中 的 地 位 。 但 是 这 些 RIA 技术 来 自 于 不 同 的 开发 商 ， 没 有 统一 的 规范 。 其 中 比较 有 实 
力 的 RIA 客户 端 开发 技术 就 有 近 十 种 。 

Adobe Flash/Flex 
Silverlight 
Laszlo 


Avalon 

Java SWT 

XUL 

Bindow 

JavaFX 

口 Curl 
这 其 中 的 Flash 和 Silverlight 算是 比较 主流 的 技术 了 ， 均 有 着 庞大 的 开发 者 群体 。 
HTML 5 发 展 了 一 大 批 原生 的 功能 ， 完 全 可 以 替代 Flash 和 Silverlight 的 实现 。 由 于 这 

些 RIA 技术 的 应 用 都 是 以 插件 的 形式 依附 着 浏览 器 运行 的 , 因此 HTML 5 的 出 现 对 其 造成 


。14。 


BDOGGDGQGes 


第 1 章 HIML 5 标准 


了 极 大 的 威胁 。 其 中 , Adobe 已 经 宣布 放弃 Flash 移动 业务 , 最 大 的 原因 是 因为 有 了 HIML 5。 
事实 上 ，HTML 5 的 功能 在 很 多 方面 并 不 成 熟 ， 再 加 上 Flash 和 Silverlight 都 有 着 庞大 
的 用 户 群 体 ，HTML 5 和 Flash、Silverlight 等 RIA 技术 仍然 会 长 期 存在 ， 只 不 过 HIML 5 
顺应 了 发 展 的 趋势 ， 它 的 绝对 优势 在 于 未 来 。 


3. 最 终 方向 


在 技术 发 展 方面 , HTML 5 将 会 把 桌面 应 用 所 能 实现 的 功能 逐渐 地 移植 进来 : 包括 3D 
绘图 、 设 备 元 素 、 和 触摸 时 间 、 点 对 点 通信 等 。 

随 着 网 络 带宽 的 提高 和 各 种 移动 设备 的 流行 ， 将 会 出 现 越 来 越 多 的 Web 应 用 程序 。 
Web 应 用 程序 的 好 处 就 是 不 用 下 载 和 安装 ， 在 网 络 畅通 的 情况 下 可 以 直接 加 载运 行 。 

HTML 5 将 会 模糊 Web 应 用 与 桌面 应 用 的 界限 ， 特 别 是 对 于 分 布 式 的 应 用 ，HTML 5 
有 着 先天 的 优势 ， 不 论 是 开发 还 是 部 署 都 没有 那么 麻烦 。 

HTML 5 就 是 为 移动 而 生 的 。 乔 布 斯 的 苹果 重新 定义 了 移动 互联 网 ，HTML 5 有 望 成 
为 第 二 个 苹果 。HTML 5 让 移动 云 也 成 为 了 可 能 。 

浏览 器 即 操作 系统 。 沿 着 HTML 5 的 发 展 思路 ， 越 来 越 多 的 主流 应 用 就 是 基于 浏览 
运行 的 Web 应 用 ， 传 统 的 桌面 应 用 不 再 是 主流 ， 浏 览 器 也 将 会 成 为 软件 运行 的 主要 环境 。 
对 此 ，Google 已 经 开发 了 Chrome 操作 系统 ， 该 操作 系统 的 目标 是 包含 丰富 的 基于 HTML 
API 实现 的 功能 ， 它 提供 完美 的 用 户 体验 ， 同 时 使 其 上 运行 的 应 用 程序 完全 符合 标准 的 
Web 体系 架构 。 


1.4 小 结 


本 章 全 面 介绍 了 HTML 5 的 相关 发 展 情况 。 首 先 回顾 了 HTML 的 发 展 历史 , 重点 介绍 
了 HTML 5 的 设计 理念 、 新 增 的 原生 功能 及 其 带 来 的 好 处 ; 在 对 于 HTML 5 的 新 功能 介绍 
中 ， 重 点 介绍 了 新 增 的 一 些 重要 元 素 、 全 新 的 选择 器 功能 和 HIML 5 的 开发 调试 ， 最 后 展 
望 了 HTML 5 的 未 来 。 本 章 的 难点 在 于 对 两 个 时 间 点 的 理解 ， 以 及 对 设计 理念 和 新 增 原生 
功能 的 理解 ， 因 为 这 些 方面 容易 造成 误解 ， 对 于 初始 接触 HTML 5 的 读者 来 说 ， 一 定 要 对 
HTML 5 有 着 正确 的 认识 。 

下 一 章 ， 我 们 将 介绍 一 下 CSS 3 层 倒 样式 表 。 


LS 器 题 


【习题 1】 列 出 HTML 5 发 展 的 两 个 时 间 点 ， 并 说 明 发 展 目标 。 

【习题 2】 在 向 下 兼容 方面 ，HIML 5 有 着 很 强 的 兼容 能 力 ， 允 许 存 在 不 严谨 的 写法 。 
这 一 设计 理念 遵循 的 是 什么 法 则 ? 

【习题 3】 列 出 HIML 5 新 增 的 原生 功能 (至 少 列 出 4 个 ) 和 新 增 的 标签 元 素 (至 少 列 
出 6 个 ) 。 

【习题 4】 列 出 HTML 5 新 增 的 3 个 选择 器 函数 。 

【习题 5】 尝 试 把 一 个 window 对 象 输出 到 控制 台 。 
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说 起 HTML 5， 必 然 会 提 到 CSS 3， 不 禁 让 人 想起 圆 角 、 阴 影 、 渐 变 页 面 泻 染 效果 。 
CSS 3 是 CSS 技术 的 升级 版 本 ， 是 下 一 代 样 式 表 语 言 。CSS 3 语言 开发 是 朝 着 模块 化 发 展 
的 。 以 前 的 规范 作为 一 个 模块 实在 是 太 庞大 而 且 比 较 复 杂 , 所 以 把 它 分 解 为 一 些小 的 模块 ， 
更 多 新 的 模块 也 被 加 入 进来 。 这 些 模块 包括 : 盒子 模型 、 列 表 模 块 、 超 链接 方式 、 语 言 模 
块 、 背 景 和 边框 、 文 字 特 效 、 多 栏 布局 等 。 本 章 将 对 CSS 3 进行 全 面 的 概要 的 介绍 ， 让 大 
家 对 CSS 3 有 一 个 初步 的 、 总 体 的 认识 。 


2.1 CSS3 简介 


首先 ， 我 们 来 了 解 一 下 CSS 3 的 背景 。 
2.1.1 CSS 3 的 历史 背景 


CSS 的 发 展 是 伴随 着 HTML 的 发 展 而 发 展 的 。 

从 1990 年 代 初 HTML 被 发 明 开 始 ， 样 式 表 就 以 各 种 形式 出 现 了 。 不 同 的 浏览 器 结合 
了 它们 各 自 的 样式 语言 ， 读 者 可 以 使 用 这 些 样式 语言 来 调节 网 页 的 显示 方式 。 一 开始 样式 
表 是 给 读者 用 的 , 最 初 的 HTML 版 本 只 含有 很 少 的 显示 属性 , 读者 来 决定 网 页 应 该 怎样 被 

但 随 着 HTML 的 成 长 ,为 了 满足 设计 师 的 要 求 ， HTML 获得 了 很 多 显示 功能 。 随 着 这 
些 功 能 的 增加 ， 额 外 的 样式 语言 变 得 越 来 越 没 有 意义 了 。 

1994 年 哈 坤 。 利 提出 了 CSS 的 最 初 建议 。 伯 特 。 波 斯 (Bert Bos) 当时 正在 设计 一 个 
叫做 Argo 的 浏览 器 ， 他 们 决定 一 起 合作 设计 CSS。 

当时 已 经 有 过 一 些 样式 表 语 言 的 建议 了 ， 但 CSS 是 第 一 个 含有 “ 层 登 ”的 主意 的 。 在 
CSS 中 ， 一 个 文件 的 样式 可 以 从 其 他 的 样式 表 中 继承 下 来 。 读 者 在 有 些 地 方 可 以 使 用 他 自 
己 更 喜欢 的 样式 ， 在 其 他 地 方 则 继承 ， 或 “ 层 且 ”作者 的 样式 。 这 种 层 又 的 方式 使 作者 和 
读者 都 可 以 灵活 地 加 入 自己 的 设计 ， 混 合 各 人 的 爱好 。 

哈 坤 于 1994 年 在 芝加哥 的 一 次 会 议 上 第 一 次 展示 了 CSS 的 建议 ，1995 年 他 与 波斯 一 
起 再 次 展示 这 个 建议 。 当 时 W3C 刚刚 创建 ，W3C 对 CSS 的 发 展 很 感 兴趣 ， 它 为 此 组 织 
一 次 讨论 会 。 哈 坤 、 波 斯 和 其 他 一 些 人 《如 微软 的 托马斯 。 雷 尔 登 ) 是 这 个 项 目的 主要 技 
术 负 责 人 。 

口 1996 年 底 ，CSS 已 经 完成 。 同 年 12 月 发 CSS 发 布 了 第 一 个 版 本 的 规范 CSS1。 

口 1997 年 初 ，W3C 内 组 织 了 专门 管 CSS 的 工作 组 ， 其 负责 人 是 克 里 斯 里 雷 。 这 
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个 工作 组 开始 讨论 第 一 版 中 没有 涉及 的 问题 。 

口 1998 年 5 月 发 布 了 第 二 个 版 本 的 规范 CSS 2。 

口 2002 年 工作 组 又 启动 了 对 CSS 2.1 的 开发 ， 这 是 CSS 2 的 修订 版 ， 最 终于 2004 年 
正式 发 布 了 修订 版 本 CSS 2.1。CSS 2.1 是 目前 最 流行 、 浏 览 器 支持 最 完整 的 版 本 。 


尽管 CSS 3 的 开发 工作 在 2000 年 以 前 就 启动 了 ， 但 距 最 终 的 发 布 还 有 相当 长 的 时 间 。 


为 了 提高 开发 速度 以 及 使 各 个 浏览 器 能 够 渐进 地 支持 它 ，CSS 3 采用 模块 化 的 开发 方案 ， 
每 个 模块 都 能 独立 地 实现 和 发 布 ， 这 也 为 未 来 的 CSS 扩展 莫 定 了 基础 。 


2.1.2 CSS 3 的 发 展现 状 


目前 ，CSS 3 规范 尚 处 于 完善 之 中 ， 因 此 浏览 器 的 支持 程度 各 有 不 同 。 为 了 让 用 户 能 
够 体验 到 CSS 3 的 好 处 ， 各 主流 浏览 器 都 定义 了 自己 的 私有 属性 。 


1. 模块 化 的 发 展 


CSS 3 开始 遵循 模块 化 的 开发 。 以 前 的 规范 作为 一 个 模块 实在 是 太 庞大 而 且 比 较 复杂 ， 
所 以 ，CSS 3 把 它 分 解 为 多 个 小 的 模块 。 这 样 ， 有 助 于 理 清 各 个 模块 规范 之 间 的 关系 。 

CSS 3 的 模块 化 规范 , 显得 非常 灵活 。 一 个 CSS 规范 如 果 要 完整 地 获得 浏览 器 的 支持 ， 
是 非常 困难 的 ， 但 是 浏览 器 选择 完整 支持 某 个 模块 的 规范 是 比较 容易 实现 的 。 反 过 来 ， 如 
果 要 衡量 一 个 浏览 器 对 CSS 3 的 支持 程度 ， 可 以 各 个 模块 分 别 衡量 。 

CSS 3 模块 化 的 发 展 有 利于 未 来 的 扩展 。 当 CSS 需要 增加 新 的 规范 时 ， 非 常 不 希望 其 


他 规范 也 跟着 变动 。 模 块 化 的 发 展 ， 使 得 每 个 独立 的 模块 都 能 根据 需 


进行 独立 的 更 新 。 


当 增加 新 的 特性 或 模块 时 ， 不 会 影响 已 经 存在 的 特性 。 如 表 2.1 所 示 为 CSS 3 中 的 模块 。 


表 2.1 CSS 3 中 的 模块 


模 块 名 称 功能 描述 
Basic box model 定义 各 种 与 盒 相 关 的 样式 
Line 定义 各 种 与 直线 相关 的 样式 
Lists 定义 各 种 与 列表 相关 的 样式 
yi 定义 各 种 与 超 链 接 相关 的 样式 。 例 如 锚 的 显示 方式 、 激 活 时 的 视觉 


效果 等 


Presentation Levels 


定义 页 面 中 元 素 的 不 同 的 样式 级 别 


Speech 定义 各 种 与 语音 相关 的 样式 。 例 如 音量 、 音 速 、 说 话 间歇 时 间 等 属性 
Background and border 定义 各 种 与 背景 和 边框 相关 的 样式 

Text 定义 各 种 与 文字 相关 的 样式 

Color 定义 各 种 与 颜色 相关 的 样式 

Font 定义 各 种 与 字体 相关 的 样式 

Paged Media 定义 各 种 页 眉 、 页 脚 、 页 数 等 页 面 元 数据 的 样式 

Cascading and inheritance 定义 怎样 对 属性 进行 赋值 

Value and Units 将 页 面 上 各 种 各 样 的 值 与 单位 进行 统一 定义 ， 以 供 其 他 模块 使 用 
Image Values 定义 对 image 元 素 的 赋值 方式 


2D Transforms 


在 页 面 中 实现 二 维 空间 上 的 变形 效果 
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模块 名 称 功能 描述 
3D Transforms 在 页 面 中 实现 三 维 空间 上 的 变形 效果 
Transforms 在 页 面 中 实现 平滑 过 渡 的 视觉 效果 
Animations 在 页 面 中 实现 动画 
CSSOM View 查看 管理 页 面 或 页 面 的 视觉 效果 ， 处 理 元 素 的 位 置信 息 
i 定义 CSS 样式 表 的 基本 结构 、 样 式 表 中 的 一 些 语法 细节 、 浏 览 器 对 
于 样式 表 的 分 析 规 则 


Generated and Replaced Content 定义 怎样 在 元 素 中 插入 内 容 
定义 当 一 些 元 素 的 内 容 太 大 ， 超 出 了 指定 的 元 素 尺 寸 时 ， 是 否 以 及 


i 怎样 显示 溢出 部 分 

Ruby 定义 页 面 中 ruby 元 素 (用 于 显示 拼音 文字 ) 的 样式 
Writing Modes 定义 页 面 中 文本 数据 的 布局 方式 

Basic User Interface 定义 在 屏幕 、 纸 张 上 进行 输出 时 页 面 的 泻 染 方式 
Namespaces 定义 使 用 命名 空间 时 的 语法 

Media Queries 根据 媒体 类 型 来 实现 不 同 的 样式 

Reader Media Type 定义 用 于 屏幕 阅读 器 之 类 的 阅读 程序 时 的 样式 
Multi-column Layout 在 页 面 中 使 用 多 栏 布局 方式 

Template Layout 在 页 面 中 使 用 特殊 布局 方式 

Flexible Box Layout 创建 自 适 应 浏览 器 窗口 的 流动 布局 或 自 适应 字体 大 小 的 弹性 布局 
Grid Position 在 页 面 中 使 用 风格 布局 方式 


Generated Content for Paged Media | 在 页 面 中 使 用 印刷 时 使 用 的 布局 方式 
2. 浏览 器 支持 情况 


尽管 CSS 3 的 很 多 新 的 特性 很 受 开发 者 的 欢迎 ， 但 并 不 是 所 有 的 浏览 器 都 支持 它 。 各 
个 主流 浏览 器 都 定义 了 各 自 的 私有 属性 ， 以 便 能 够 让 用 户 体验 CSS 3 的 新 特性 。 

私有 属性 固然 可 以 避免 不 同 浏览 器 中 解析 同一 个 属性 时 出 现 冲 突 ， 但 是 也 给 设计 师 们 
带 来 诸多 不 便 ， 需 要 编写 更 多 的 CSS 代码 ,而且 也 没有 解决 同一 页 面 在 不 同 浏览 器 中 表现 
不 一 致 的 问题 。 

尽管 私有 属性 有 很 多 浆 端 ， 但 是 也 为 设计 师 们 提供 了 较 大 的 选择 空间 ， 至 少 在 CSS 3 
规范 发 布 以 前 ， 能 表现 一 些 特定 的 CSS 3 的 效果 。 

Webkit 引擎 的 浏览 器 (如 Safari、Chrome) 的 私有 属性 的 前 级 是 -webkit-; Gecko 引擎 
的 浏览 器 (如 Firefox〉 的 私有 属性 的 前 级 是 -moz-; Opera 浏览 器 的 私有 属性 的 前 级 是 -0-; 
正 浏览 器 (限于 正 8+) 的 私有 属性 的 前 级 是 -ms-。 


2.1.3 CSS 3 新 特性 预览 

与 之 前 的 版 本 相 比 ，CSS 3 的 改进 是 非常 大 的 。CSS 3 不 仅仅 进行 了 修订 和 完善 ， 更 
增加 了 很 多 新 的 特性 ， 把 样式 表 的 功能 发 挥 得 淋漓 尽 致 。 之 前 的 很 多 效果 都 借助 图 片 和 脚 
本 来 实现 ， 现 在 只 需要 几 行 代码 就 能 搞定 了 。 这 不 仅 简化 了 设计 师 的 工作 ， 页 面 代码 也 更 
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加 简洁 和 清晰 。 
下 面 浏 览 一 下 CSS 3 的 主要 新 特性 。 


1. 功能 强大 的 选择 器 


CSS 3 增加 了 更 多 的 CSS 选择 器 ， 可 以 实现 更 简单 但 是 更 强大 的 功能 。 例 如 ， 在 属性 
选择 符 中 引入 通配符 、 灵 活 的 伪 类 选择 符 nth-child0 等 。 


2. 文字 效果 


在 CSS 3 中 ， 可 以 给 文字 增加 阴影 、 描 边 和 发 光 等 效果 ; 还 可 以 自 定义 特殊 的 字体 ， 
如 艺术 字体 等 网 络 上 不 常用 的 字体 。 


3. 边框 

在 CSS 3 中 ， 可 以 直接 给 边框 设计 圆 角 、 阴 影 、 边 框 背 景 等 ， 其 中 边框 背景 会 自动 把 
背景 图 切割 显示 。 

4. 背景 

背景 图 片 的 设计 更 加 灵活 : 不 但 可 以 改变 背景 图 片 的 大 小 、 裁 剪 背景 图 片 ， 还 可 以 设 
置 多 重 背景 。 

5. 色彩 模式 


CSS 3 的 色彩 模式 ， 除 了 支持 RGB 颜色 外 ,还 支持 HSL (色调 、 饱 和 度 、 亮 度 ) ， 并 
上 且 针 对 这 两 种 色彩 模式 ， 又 增加 了 可 以 控制 透明 度 的 色彩 模式 。 以 后 ， 再 设计 半 透 明 效果 
就 没有 那么 麻烦 了 。 


6. 盒 布局 和 多 列 布局 

在 布局 方面 ，CSS 3 新 增 了 两 种 布局 方式 : 灵活 的 盒 布局 和 多 列 布局 。 这 两 种 布局 ， 
可 以 弥补 现 有 布局 中 的 不 足 ， 为 页 面 布局 提供 了 更 多 的 手段 ， 并 大 幅度 地 缩减 了 代码 。 

7. 渐变 

CSS 3 已 经 支持 渐变 的 设计 。 这 样 ， 不 但 告别 切 图 的 时 代 ， 而 且 设计 也 更 加 灵活 ， 后 
期 的 维护 也 极为 方便 。 

8. 动画 

有 了 CSS 3 的 动画 ， 设 计 师 们 不 用 编写 脚本 ， 直 接 就 可 以 让 页 面 元 素 动 起 来 ， 并 且 不 
会 影响 整体 的 页 面 布局 。 

9. 媒体 查询 


CSS 3 提供 了 丰富 的 媒体 查询 功能 ， 可 以 根据 不 同 的 设备 、 不 同 的 屏幕 尺寸 来 自动 调 
整 页 面 的 布局 。 


2.2 增强 的 选择 器 功能 


在 样式 表 中 ， 选 择 器 是 一 个 非常 重要 的 功能 。 伴 随 CSS 3 和 HTML 5 的 发 展 ， 选 择 器 
的 功能 已 经 超出 了 CSS 的 应 用 范围 ， 发 展 成 为 一 个 独立 的 选择 器 规范 ， 目 前 还 可 以 应 用 于 
脚本 的 选择 查询 。 针 对 样式 表 选 择 器 ，CSS 3 新 增 了 诸多 选择 符 ， 并 兼容 CSS 1 和 CSS 2 
中 的 选择 符 。 

下 面 系统 地 介绍 一 下 CSS 选择 符 ， 并 详细 介绍 CSS 3 新 增 的 选择 符 。 


2.2.1 元 素 选择 符 和 关系 选择 符 


元 素 选择 符 和 关系 选择 符 是 CSS 中 最 基本 的 选择 符 。 如 表 2.2 所 示 为 元 素 选 择 符 ， 如 
表 2.3 所 示 为 关系 选择 符 。 
表 2.2 CSS 元 素 选择 符 


选择 符 名 称 简 介 版 本 
本 通 配 选 择 符 匹配 所 有 元 素 CSS2 
E 类 型 选择 符 匹配 指定 类 型 的 元 素 CSS 1 
E#myid ID 选择 符 匹配 唯一 标识 id 属性 等 于 myid 的 E 元 素 CSS 1 
E.myclass 类 选择 符 匹配 class 属性 值 为 myclass 的 所 有 下 元素 cssi 

表 2.3 CSS 关 系 选择 符 

选择 符 名 称 简 介 版 本 

EF 也 含 选择 符 选择 所 有 被 E 元 素 包 含 的 下 元 素 Ces 

EF.G 选择 符 分 组 选择 所 有 的 下 元素 、F 元 素 和 G 元 素 CSS1 

E>F 子 对 象 选择 符 选择 所 有 作为 元素 的 子 元 素 F CSS 2 

E+F 相 邻 选择 符 选择 紧 贴 在 EE 元素 之 后 元 素 CSS2 


元 素 选 择 符 和 关系 选择 符 在 CSS 3 之 前 已 经 非常 完善 ， 并 且 使 用 频率 也 较 高 ， 所 以 在 
CSS 3 中 完全 沿用 之 前 的 版 本 ， 和 暂时 没有 再 提供 新 的 选择 符 。 


2.2.2 属性 选择 符 


在 CSS 3 中 ， 属 性 选择 符 已 经 构成 了 非常 强大 的 标签 属性 过 滤 体系 ， 如 表 2.4 所 示 。 
表 2.4 CSS 属 性 选择 符 


E[attr] 选择 具有 attr 属性 的 EE 元 素 [ESS2 

Elattr-"val"] | 选择 具有 attr 属性 且 属 性 值 等 于 value 的 下 元 素 Css2 
选择 具有 att 属性 且 属 性 值 为 一 个 用 空格 分 隔 的 字 词 列表 , 其 中 一 个 等 于 val 

El[attr~="val"] 的 王 元 素 CSS2 
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选 择 符 简 人 版 本 
选择 具有 attr 属性 且 属 性 值 为 一 个 用 连 字 符 分 隔 的 字 词 列表 , 由 val 开始 的 卫 
元 素 

E[attr^="val"] | 选择 具有 attr 属性 且 属 性 值 为 以 val 开头 的 字符 串 的 下 元 素 

E[attr$="val"] | 选择 具有 attr 属性 且 属 性 值 为 以 val 结尾 的 字符 串 的 EE 元素 

E[attr*= "val"] | 选择 具有 attr 属性 且 属 性 值 为 包含 val 的 字符 串 的 EE 元素 


Elattr|="val"] CSS2 


CSS 3 


由 表 2.4 可 知 ，CSS 3 新 增 了 3 个 属性 选择 符 : E[attr^="val"]、E[attr$="val"]、 
E[attr*="val"]。 这 些 选 择 符 遵 循 了 惯用 的 编码 规则 ， 选 用 了 ^、$ 和 # 这 三 个 通用 的 匹配 运算 
符 ， 下 意义 。 

口 ^ 表 示 匹 配 起 始 符 。 

口 $ 表 示 匹 配 结束 符 。 

口 * 表 示 匹 配 任意 字符 。 
下 面 我 们 通过 一 个 示例 来 了 解 这 3 个 属性 选择 符 的 使 用 方法 。 


1. 属性 选择 符 E[attr^="val"] 


该 选择 符 具 有 attr 属性 且 属 性 值 为 一 个 用 空格 分 隔 的 字 词 列表 , 其 中 一 个 等 于 val 的 E 
元 素 a 
【示例 2-1】 CSS 属性 选择 符 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS 属性 选择 符 </title> 
<style type="text/css"> 
ulf{ 
margin:0; 
padding:10px 10px 10px 30px; 


Ea 
margin:1px; 
font-family:Courier New; 
font-weight:bold; 


上} 

/* 属性 选择 符 Elattr^="val"] */ 

li[lang^="a"] { 

background-color:#F60; 

} 

</style> 

</head> 

<body> 

<ul> 
<li lang="af">lang=af aaaaaaaaa</1i> 
<li lang="ar">lang=ar bbbbbbbbb</1i> 
<li lang="be">lang=be ccccccccc</1i> 
<li lang="bg">lang=bg dddddqdqdqd</1i> 
< "br">lang=br eeeeeeeee</1i> 
<1i ca">lang=ca fffffffff</1i> 
< cs">lang=cs ggggggggg</1i> 
<li lang="da">lang=da hhhhhhhhh</1i> 


dls 
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</ul> 
</body> 
</html> 


运行 结果 如 图 2-1 所 示 。 


全 css 属 性 选择 符 
© 加 yxw740:5080/ 


lang=af aaaaaaaaa | 
lang=ar bbbbbbbbp | 
CCccccccecec 
ddddddddd 
eeeeeeeee 
EEEEEEEE 
ggggggggg 
hhhhhhhhh 
iiiiiiiii 


中 
Be 


图 2-1 属性 选择 符 Efattr^="val"] 
由 图 2-1 所 示 的 运行 结果 可 知 ，lillang^="a"] 匹 配 了 属性 lang 的 值 是 以 "a" 开 头 的 二 元素 。 
2. 属性 选择 符 E[attr$="val"] 
如 果 使 用 的 是 属性 选择 符 E[attr$="val"]， 关 键 样式 代码 修改 如 下 : 
li[lang$="a"] { 
background-color:#F60; 
运行 结果 如 图 2-2 所 示 。 
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lang=af aaaaaaaaa 
lang=ar bbbbbbbbb 
lang=be ccccccccec 
lang=bg ddddddddd 
lang=br eeeeeeeee 


lang=cs ggggggggg 


图 2-2 属性 选择 符 E[attr$="val"] 
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图 2-2 所 示 的 运行 结果 可 知 ，li[lang$="a"] 匹 配 了 属性 lang 的 值 是 以 "a" 结 尾 的 贡 


3. 属性 选择 符 E[attr*="val"] 
如 果 使 用 的 是 属性 选择 符 E[attr*="val"]， 关 键 样式 代码 修改 如 下 : 


li[lang*="a"] { 
background-color:#F60; 


运行 结果 如 图 2-3 所 示 。 


辐 css 属 性 选择 符 
© | © yzw740:8080/t 


lang=be ccccccccec 


lang=bg ddddddddd 
。 lang=br eeeeeeeee 


* lang=cs ggggggggg 


图 2-3 属性 选择 符 E[attr*="val"] 


由 图 2-3 所 示 的 运行 结果 可 知 ，lilang*="a"] 匹 配 了 属性 lang 的 值 合 有 字符 "a" 的 元 素 。 
2.2.3 ”结构 伪 类 选择 符 


CSS 3 新 增 的 结构 伪 类 选择 符 ， 可 以 通过 文档 结构 的 相互 关系 来 匹配 特定 的 元 素 。 对 


于 有 规律 的 文档 结构 ， 可 以 减少 class 属性 和 id 属性 的 定义 ， 使 得 文档 结构 更 加 简洁 。 结 
构 伪 类 选择 符 如 表 2.5 所 示 。 
表 2.5 CSS 结 构 伪 类 选择 符 
选 择 符 简介 版 本 
E:root 选择 匹配 EE 所 在 文档 的 根 元 素 CSS 3 
E:not(s) 选择 匹配 所 有 不 匹配 简单 选择 符 s 的 EE 元素 CSS 3 
E:empty 匹配 没有 任何 子 元 素 (包括 text 节点 ) 的 元 素 卫 CSS3 
E:target 匹配 当前 链接 地 址 指向 的 EE 元 素 CSS3 
E:first-child 匹配 父 元 素 的 第 一 个 子 元 素 E Css2 
E:last-child 匹配 父 元 素 的 最 后 一 个 子 元 素 E CSS 3 
E:nth-child(n) 匹配 父 元 素 的 第 个 子 元 素 E CSS3 
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选 择 符 简 人 版 本 
E:nth-last-child(n) 匹配 父 元 素 的 倒数 第 n 个 子 元 素 E CSS3 
E:only-child 匹配 父 元 素 仅 有 的 一 个 子 元 素 E CSS3 
E:first-of-type 匹配 同类 型 中 的 第 一 个 同 级 兄弟 元 素 E CSS3 
E:last-of-type 匹配 同类 型 中 的 最 后 一 个 同 级 兄弟 元 素 E CSS 3 
E:only-of-type 匹配 同类 型 中 的 唯一 一 个 同 级 兄弟 元 素 EE CSS3 
E:nth-of-type(n) 匹配 同类 型 中 的 第 个 同 级 兄弟 元 素 EE CSS 3 
E:nth-last-of-type(n) 匹配 同类 型 中 的 倒数 第 个 同 级 兄弟 元 素 E CSS3 


1. 选择 符 root、not、empty 和 target 


口 选择 符 E:root: 选择 匹配 EE 所 在 文档 的 根 元 素 。 所谓 根 元 素 就 是 位 于 文档 结构 中 的 
顶层 元 素 。 在 HTML 页 面 中 ， 根 元 素 就 是 html 元 素 ， 此 时 该 选择 符 与 html 类 型 


选择 符 匹 配 的 内 容 相 同 。 


口 选择 符 E:not(s): 选择 匹配 所 有 不 匹配 简单 选择 符 s 的 EE 元素。 
口 选择 符 E:empty: 选择 匹配 卫 的 元 素 ， 且 该 元 素 不 包含 子 节点 。 文 本 也 属于 节点 。 
口 选择 符 E:target: 选择 匹配 当前 链接 地 址 指向 的 王 元 素 。 


2. 选择 符 first-child、last-child、nth-child 和 nth-last-child 


利用 这 几 个 选择 符 ， 可 以 指定 一 个 父 元 素 中 的 第 一 个 子 元 素 、 最 后 一 个 子 元 素 、 指 定 

序号 的 子 元 素 、 第 偶数 个 子 元 素 和 第 奇数 个 子 元 素 。 

口 选择 符 E:first-child: 匹配 父 元 素 的 第 一 个 子 元 素 。 

口 选择 符 E:last-child， 匹 配 父 元 素 的 最 后 一 个 子 元素 。 

口 选择 符 E:nth-child(n): 匹配 父 元 素 中 第 n 个 位 置 的 子 元 素 。 其 中 ， 参 数 n 可 以 是 
-个 数字 、 关 键 字 (odd、even) 、 公 式 (2n、2n+1 等 ) 。 人 参数 的 索引 起 始 值 为 
1， 而 不 是 0。 使 用 方法 例如 : trnth-child($) 匹 配 表格 里 的 第 三 个 tr 元 素 ; tr:nth- 
child(2n) 和 trnth-child(even) 匹 配 表格 里 的 第 偶数 个 tr 元 素 ; tr:nth-child(2n+1) 和 
tr:nth-child(odd) 匹 配 表格 里 第 奇数 个 tr 元素 。 

口 选择 符 E:nth-last-child(n): 匹配 父 元 素 中 倒数 第 n 个 位 置 的 子 元 素 。 与 选择 符 
E:nth-child(n) 的 计算 顺序 相反 ， 语 法 和 用 法 均 相同 。 

下 面 我 们 通过 设计 一 个 表格 来 了 解 这 四 个 选择 符 。 表 格 的 第 一 行为 标题 行 ， 最 后 一 行 

为 翻 页 预 留 ， 其 他 行 则 交替 显示 两 种 不 同 的 样式 。 

【示例 2-2】 使 用 伪 类 选择 符 设 计 表 格 。 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset="utf-8" /> 
<title>CSS 属性 选择 符 </title> 


<style type="text/css"> 
table { 


border-collapse:collapse; 


font-size:12px; 
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table td { 
font-size:12px; 
padding:0 3px; 
line-height:22px; 
) 
tr:nth-child(even) { 
background:#e6e6e6; 
站 
tr:first-child { 
background: -webkit-gradient (linear, left top, left bottom, from 
(#dbdbdb), tol(#cccccc)); 
background: -moz-linear-gradient (left, #dbdbdb, #cccccc); 
); 
tr:last-child { 
background:#d6d6d6; 
} 
</style> 
</head> 
<body> 
数据 表格 
<table width="100%" border="1" bordercolor="#CCCCCC" cellpadding="0" 
cellspacing="0"> 
<tr> 
<td>1 编号 </td> <td> 标 题 </td> <td> 作 者 </td> <td> 时 间 </td> 
和 ET 
< 二 > 
<td>2</td> <td>gnbsp;</td> <td>gnbsp;</td> <td>gnbsp;</td> 
ET 
</table> 
</body> 
</html> 


运行 结果 如 图 2-4 所 示 。 


人 css 导 性 渤 择 符 
C @ym740 


数据 表格 
1 编号 


BE I 


图 2-4 设计 的 表格 


在 示例 2-2 中 ， 首 先 使 用 tr:nth-child(even) 来 控制 偶数 行 的 背景 颜色 加 深 ; 接着 使 用 
tr:first-child 设置 了 第 一 行 的 样式 ; 最 后 使 用 tr:last-child 设置 了 最 后 一 行 的 样式 。 在 本 示例 


而 | 济 昂 活 
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中 ， 最 后 一 行 也 可 以 使 用 trnth-last-child(]) 来 蔡 代 。 
3. 选择 符 nth-of-type 和 nth-last-of-type 
口 选择 符 E: nth-of-type (n): 匹配 父 元 素 中 第 n 个子 元 素 E。 参 数 n 的 使 用 与 
E:nth-child(n) 相 同 。 不同 的 是 ,在 匹配 父 元 素 的 子 元 素 时 ， 首 先 把 匹配 EE 的 子 元 素 
筛选 出 来 单独 排序 ， 非 三 的 子 元 素 不 参与 排序 。 
口 选择 符 E:nth-last- of-type (n): 匹配 父 元 素 中 倒数 第 n 个 子 元 素 。 与 选择 符 E:nth- 
of-type (n) 的 计算 顺序 相反 ， 语 法 和 用 法 均 相 同 。 


4. 选择 符 only-child、first-of-type、last-oftype 和 only-of-type 


口 选择 符 E: first-of-type: 匹配 父 元 素 中 第 一 个 子 元 素 E。 等 同 于 E: nth-of-type (1) 的 
匹配 效果 。 

口 选择 符 E: last-of-type: 匹配 父 元素 中 最 后 一 个 子 元 素 E。 等 同 于 E: nth-last-of-type 
(1) 的 匹配 效果 。 


口 选择 符 E: only-child: 匹配 父 元 素 中 唯一 子 元 素 E。 父 元 素 只 能 有 唯一 的 子 元 素 ， 
并 且 该 元 素 必须 为 元 素 E， 才 能 匹配 成 功 。 

口 选择 符 E: only-of-type: 匹配 父 元 素 中 只 包含 一 个 子 元 素 E。 父 元 素 可 以 有 多 个 子 
元 素 ， 但 子 元 素 E 只 能 有 一 个 才能 匹配 成 功 。 


2.2.4 UI 元 素 状态 伪 类 选择 符 


在 CSS 3 中 ， 还 有 一 种 伪 类 选择 符 叫 UI 元 素 状 态 伪 类 选择 符 ， 可 以 设置 元 素 处 在 某 
种 状态 下 的 样式 ， 在 人 机 交互 过 程 中 ， 只 要 元 素 的 状态 发 生 了 变化 ， 选 择 符 就 有 可 能 会 匹 
配 成 功 。 下 面 列 出 了 CSS 中 的 UI 元 素 状 态 伪 类 选择 符 ， 如 表 2.6 所 示 。 


表 2.6 CSS UI 元 素 状 态 伪 类 选择 符 


选择 符 简 介 版 本 
E:link 设置 超 链接 a 在 未 被 访问 前 的 样式 CSS 1 
E:visited ”| 设置 超 链接 a 在 其 链接 地 址 已 被 访问 过 时 的 样式 CSS 1 
E:hover 设置 元 素 在 其 鼠标 悬 停 时 的 样式 CSS 1/CSS 2 
E:actvie 设置 元 素 在 被 用 户 激活 (在 鼠标 单 击 与 释放 之 间 发 生 的 事件 ) 时 的 样式 “| CSS 1/CSS 2 
E:focus 设置 元 素 在 成 为 输入 焦点 (该 元 素 的 onfocus 事件 发 生 ) 时 的 样式 CSS 1/CSS 2 

匹配 所 有 用 户 (form ) 上 处 于 过 态 的 元 素 E( input 
ed dh 表单 ) 上 处 于 选中 状态 的 元 素 E (用 于 input type Be 
E:enabled | 匹配 所 有 用 户 界面 (form 表单 ) 上 处 于 可 用 状态 的 元 素 E CSS3 
E:disabled | 匹配 所 有 用 户 界面 (form 表单 ) 上 处 于 禁用 状态 的 元 素 了 CSS3 
表 2.6 可 知 ，CSS 3 新 增 了 3 个 UI 元 素 状 态 伪 类 选择 符 : E:checked、E:enabled、 
E:disabled。 这 些 选 择 符 具 有 如 下 的 意义 。 
口 选择 符 E: checked: 匹配 所 有 用 户 界面 (form 表单 ) 上 处 于 选中 状态 的 元 素 E。 
口 选择 符 E: enabled: 匹配 所 有 用 户 界面 (form 表单 ) 上 处 于 可 用 状态 的 元 素 E。 
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口 选择 符 E: disabled: 匹配 所 有 用 户 界面 (form 表单 ) 上 处 于 禁用 状态 的 元 素 E。 
这 3 个 UI 元 素 状态 伪 类 选择 符 ， 主 要 应 用 于 表单 的 设计 ， 可 以 设计 出 交互 性 更 强 、 
更 具 人 性 化 的 表单 UI 界面 。 


2.2.5 ” 伪 元 素 选择 符 


在 CSS 3 中 ， 还 有 一 种 伪 元 素 选择 符 ， 它 并 不 是 针对 真正 的 元 素 使 用 的 选择 符 ， 而 是 
针对 CSS 已 经 定义 好 的 伪 元 素 使 用 的 选择 符 。 下 面 是 CSS 3 中 改进 过 的 伪 元 素 选择 符 ， 如 
表 2.7 所 示 。 


表 2.7 CSS 伪 元 素 选择 符 


选 择 符 简介 版 本 
EE:first-letter/E::first-letter | 设置 对 象 内 的 第 一 个 字符 的 样式 CSS 1/CSS3 
E:first-line/E::first-line 设置 对 象 内 的 第 一 行 的 样式 CSS 1/CSS3 

设置 在 对 象 前 (依据 对 象 树 的 逻辑 结构 ) 发 生 的 内 容 。 用 来 
E:before/E::before 和 content 属性 一 起 使 用 CSS 2/CSS 3 
设置 在 对 象 后 (依据 对 象 树 的 逻辑 结构 ) 发 生 的 内 容 。 用 来 
E:after/E::after 和 content 属性 一 起 使 用 CSS 2/CSS 3 
E::selection 设置 对 象 被 选择 时 的 颜色 CSS3 


由 表 2.7 可 知 ，CSS 3 的 伪 元 素 选择 符 中 的 冒号 都 改 成 了 双 冒 号 。 伪 元 素 选 择 符 的 使 
用 方法 如 下 : 

选择 符 : : 伪 元 素 {属性 : 值 } 

下 面 我 们 通过 一 个 示例 来 介绍 伪 元 素 选择 符 的 使 用 方法 。 

【示例 2-3】 使 用 伪 元 素 选择 符 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 添 加 content 内 容 </title> 

<style type="text/css"> 

/* 突出 第 一 个 字 */ 

p:first-letter { 

font-size:24px; 
font-weight:bold; 

} 

/* 链接 前 加 图 片 */ 

a[href$=doc] : :before { 
content:url (images/doc.png); 

} 

a[href$=pdf] : :before { 
content:url (images/pdf.png); 

|: 

</style> 

</head> 

<body> 

<p> 以 下 是 参考 资料 : <br> 
<a href="images/test.doc"> 参 考 资料 1</a><br> 


pg 
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<a href="images/test.pdf"> 参 考 资料 2</a> </p> 
</body> 
</html> 


运行 结果 如 图 2-5 所 示 。 


添加 content 内 容 


© yxrr740:8080/hc/Chapter2/Code2-3. ht 


以 下 是 参考 资料 ， 


加 参考 资料 1 
贸 参 考 资料 2 


图 2-5 使 用 伪 元 素 选择 符 


由 图 2-5 可 以 看 出 ， 链 接 前 面 的 图 片 是 通过 在 样式 表 中 使 用 伪 元 素 before 来 实现 的 ; 
首 个 字符 是 使 用 伪 元 素 first-letter 来 实现 的 。 其 他 伪 元 素 的 使 用 方法 是 一 致 的 。 


2.3 小 结 


本 章 主要 回顾 了 CSS 的 发 展 历程 及 目前 的 发 展 状况 ， 并 简要 介绍 了 CSS 3 的 新 特性 。 
其 中 重点 介绍 了 CSS 3 的 选择 器 功能 ， 为 设计 样式 表 提 供 更 加 灵活 的 代码 设计 方案 。 本 章 
的 难点 在 于 对 选择 器 功能 的 掌握 。 新 增 的 选择 器 功能 包括 属性 选择 符 、 伪 类 选择 符 和 伪 元 
素 选 择 符 ,它们 在 选择 文档 元 素 方面 显得 非常 灵活 ， 作 为 前 端 开 发 人 员 ， 一 定 要 掌握 它们 。 
下 一 章 将 进入 CSS 3 学 习 的 第 一 步 一 一 文本 、 背 景 、 边 框 不 再 单调 。 


24 习 题 


【习题 1】CSS 3 遵循 的 是 什么 样 的 发 展 方式 ?描述 这 种 发 展 的 益处 。 
【习题 2】 列举 一 下 CSS 3 为 哪些 方面 提供 了 新 的 特性 〈 至 少 列 出 4 个 方面 ) ? 描述 这 
【习题 3】 列 举 CSS 3 新 增 的 三 个 属性 选择 符 ， 并 描述 其 含义 。 
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在 制作 网 页 时 ， 经 常会 围绕 文本 、 背 景 和 边框 几 个 方面 进行 样式 表 设 置 。 但 在 CSS 2.0 
中 ， 如 果 涉 及 如 阴影 、 圆 角 、 多 重 背景 等 效果 ， 常 常 因为 不 能 实现 ， 转 而 寻求 其 他 办 法 。 
在 颜色 选择 及 半 透 明 颜 色 使 用 方面 也 极为 不 便 。 这 些 问题 ， 在 CSS 3 中 都 有 便捷 的 解决 方 
案 。CSS 3 在 原 有 版 本 的 基础 上 ， 扩 充 了 一 些 非常 实用 的 属性 和 颜色 方案 。 本 章 将 就 这 些 
扩充 的 内 容 进行 详细 讲解 。 


3.1 文本 与 字体 


在 网 页 设计 中 ， 丰 富 的 文本 修饰 效果 ， 不 但 可 以 增添 网 页 的 趣味 性 ， 而 且 看 起 来 更 加 
舒服 。 在 CSS 3 中 ， 在 文本 修饰 方面 ， 可 以 增加 阴影 、 描 边 和 发 光 等 效果 。 在 排版 方面 ， 
可 以 对 溢出 及 换行 进行 良好 的 控制 。 甚 至 对 于 特殊 少见 的 字体 ， 也 能 在 客户 端 显 示 良 好 。 
下 面 逐 步 讲 解 。 


3.1.1 多 样 化 的 文本 阴影 


text-shadow 属性 


在 网 页 设计 中 ， 常 常会 通过 给 文本 添加 阴影 、 描 边 和 发 光 等 效果 ， 来 实现 更 加 丰富 的 
视觉 表现 。CSS 3 中 的 阴影 属性 text-shadow， 不 但 可 以 给 文本 添加 阴影 ， 还 可 以 实现 文本 
的 描 边 和 发 光 效 果 。 


1. 参数 说 明 
阴影 属性 text-shadow 的 使 用 语法 如 下 : 


text-shadow: length || length || opacity || color 


参数 及 取 值 说 明 如 下 。 

口 length: 是 由 浮 点 数字 和 长 度 单 位 组 成 的 长 度 值 ， 可 以 为 负 值 。 两 个 length 分 别 表 
示 阴 影 在 水 平方 向 和 垂直 方向 上 相对 于 文字 本 身 的 偏 移 距离 。 

口 opacity: 是 由 浮 点 数字 和 长 度 单位 组 成 的 长 度 值 ， 不 可 以 为 负 值 ， 表 示 阴 影 效果 
模糊 作用 的 距离 。 该 值 可 以 省 略 ， 表 示 模 糊 作用 距离 为 0， 即 没有 模糊 效果 。 

口 color: 是 颜色 值 ， 表 示 阴 影 的 颜色 。 

文本 的 阴影 、 描 边 和 发 光 等 效果 ， 就 是 这 些 参数 的 不 同 组 合 的 结果 。 


外 提示 : 到 目前 为 止 ，text-shadow 属性 已 获得 所 有 的 浏览 器 厂商 的 新 版 本 浏览 器 的 支持 ， 
不 过 在 旧 的 三 8 及 以 下 的 版 本 中 ， 是 无 法 支持 该 属性 的 。 
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平和 


2. 文本 的 阴影 效果 


先 看 一 下 text-shadow 属性 的 使 用 示例 ,为 橘 黄色 文字 设置 深 灰 色 阴影 。 其 中 阴影 在 水 


垂直 方向 上 的 距离 均 为 px， 模 糊 作 用 距离 为 3px， 阴 影 颜色 为 深 灰 色 。 
【示例 3-1】 为 文字 设置 深 灰 色 阴影 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 文 字 阴 影 </title> 
<style type="text/css"> 
pf 
font-family:Verdana, Geneva, sans-serif; 
font-weight:bold; 
font-size:36px; 
color:#f90; 
text-shadow:5px 5px 3px #333; /* 添加 文字 阴影 */ 
</style> 
<body> 
<p> 阴 影 属性 <br /> 
text-shadow</p> 
</body> 
</html> 


运行 结果 如 图 3-1 所 示 。 


代码 分 析 : 在 示例 3-1 中 ， 为 属性 text-shadow 设置 了 向 右 下 的 阴影 效果 ， 颜 色 为 深 灰 


。 如 果 偏 移 值 为 负数 ， 表 示 阴 影 向 左 或 向 上 偏 移 。 修 改 text-shadow 属性 值 如 下 : 


text-shadow:-5px -5px 3px #00f; 


运行 结果 将 变 成 如 图 3-2 所 示 。 


于 影 属性 


图 3-1 向 右 下 方向 的 阴影 图 3-2 向 左上 方向 的 阴影 


还 可 以 为 阴影 属性 同时 设置 两 种 及 两 种 以 上 的 阴影 效果 。 修 改 text-shadow 属性 值 
如 下 : 


text-shadow:-5px -5px 3px #00f, 
S5px Spx 3px #333; 


运行 结果 如 图 3-3 所 示 。 


3. 文本 的 描 边 效果 


利用 text-shadow 属性 的 特性 ， 同 时 在 上 、 下 、 左 、 右 四 个 方向 为 文字 设置 多 个 阴影 ， 


Cy 
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且 不 设置 模糊 作用 距离 〈 即 默认 没有 模糊 效果 ) ， 就 可 以 实现 文本 的 描 边 效果 了 。 
【示例 3-2】 为 文字 设置 描 边 效果 。 


<!DOCTYPE HTML> 
<html> 
<head> 


<meta charset="utf-8"> 
<title> 文 字 描 边 </title> 
<style type="text/css"> 


ist 
padding:50px; 


font-family:Verdana, Geneva, sans-serif; 
font-weight:bold; 

font-size:36px; 

background-color:#CCC; 


color:#ddd; 
text-shadow:-1px 0 #333, /* 向 左 阴影 */ 
0 -lpx #333, /* 向 上 阴影 */ 
lpx 0 #333, /* 向 右 阴影 */ 
0 1px #333; /* 向 下 阴影 */ 
De 
<body> 


<p> 阴 影 属性 <br /> 
text-shadow</p> 

</body> 

</html> 


运行 结果 如 图 3-4 所 示 。 


图 3-3 同时 有 两 
代码 分 析 : 在 示例 3-2 


且 没有 模糊 效果 ， 组 合 起 来 就 是 描 边 效果 了 。 


当然 ， 为 了 表现 更 加 


阴影 属性 


taxt-Shadow 


个 阴影 图 3-4” 描 边 的 文字 
中 , 为 text-shadow 属性 在 四 个 方向 上 分 别 设置 1 个 像素 的 阴影 ， 


E 富 ， 每 个 方向 上 的 阴影 的 颜色 可 以 有 不 同 的 设置 。 如 果 将 向 左 


和 向 上 的 阴影 颜色 设置 为 白色 ， 文 字 就 会 有 凸 起 的 效果 。 修 改 text-shadow 属性 如 下 。 


text-shadow:-1Px 0 #FFF, /* 向 左 阴影 */ 
0 -1Px #FFF, /* 向 上 阴影 */ 
lpx 0 #333, /* 向 右 阴 影 */ 
0 1px #333; /* 向 下 阴影 */ 


运行 结果 如 图 3-5 所 示 。 
如 果 将 向 右 和 向 下 的 阴影 颜色 设置 为 白色 ,文字 就 会 有 凹陷 的 效果 。 修 改 text-shadow 


属性 如 下 。 
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text-shadow:-1px 0 #333, /* 向 左 阴影 */ 
0 -1px #333, /* 向 上 阴影 */ 
lpx 0 #FFF, /* 向 右 阴 影 */ 
0 1px #FFF; /* 向 下 阴影 */ 


运行 结果 如 图 3-6 所 示 。 


| 明 吕 汉 曲 ES 村 


ESGEESIadoO 


图 3-5” 凸 起 的 文字 效果 图 3-6 ”站 陷 的 文字 效果 
如 果 设 置 止 陷 的 文字 ， 就 把 向 右 和 向 下 的 阴影 颜色 改 为 白色 。 使 用 阴影 属性 ， 还 可 以 
模拟 外 发 光 效 果 ， 这 里 不 再 说 明 。 
4. 文本 的 发 光 效 果 
也 可 以 利用 text-shadow 属性 的 特性 , 不 设置 水 平和 垂直 的 偏 移 距离 , 仅 设 置 模糊 作用 
距离 ， 这 样 就 可 以 通过 修改 模糊 值 来 实现 强度 不 同 的 发 光 效 果 了 。 
【示例 3-3】 为 文字 设置 描 边 效果 。 


<!DOCTYPE HTML> 


<html> 

<head> 

<meta charset="utf-8"> 

<title> 文 字 发 光 </title> 

<style type="text/css"> 
pf 


padding:50px; 
font-family:Verdana, Geneva, sans-serif; 
font-weight:bold; 
font-size:36px; 
background-color:#333; 
color:#f£f90; 
text-shadow:0 0 10px #fff; /* 没有 偏 移 的 模糊 设置 */ 
} 
</style> 
<body> 
<p> 阴 影 属性 <br /> 
text-shadow</p> 
</body> 
</html> 


运行 结果 如 图 3-7 所 示 。 
代码 分 析 : 在 示例 3-3 中 ，text-shadow 属性 在 水 平和 垂直 的 偏 移 距 离 均 为 0， 仅 设置 
模糊 效果 ， 加 上 深 灰 色 背 景 的 衬托 ， 就 有 了 发 光 的 效果 了 。 


ss 
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图 3-7 发 光 的 文字 


全 提示 : 虽然 通过 text-shadow 属性 的 浑 染 可 以 让 网 页 变 得 更 加 丰富 和 生动 ， 但 不 建议 整 
个 页 面 处 处 都 充斥 着 这 样 的 效果 ， 那 样 网 页 会 变 得 凌乱 。 对 于 设计 良好 的 网 页 ， 
如 果 要 包含 阴影 、 描 边 和 发 光 等 效果 ， 则 可 以 通过 该 属性 轻松 实现 。 为 了 使 
text-shadow 属性 能 兼容 多 种 内 核 的 旧 的 浏览 器 ， 通 常会 针对 不 同 的 浏览 器 去 写 : 
-moz-text-shadow 对 应 Gecko 内 核 的 浏览 器 ， 如 火狐 ; -webkit-text-shadow 对 应 
Webkit 内 核 的 浏览 器 ， 如 Chrome 和 Safari 等 。 随 着 浏览 器 的 版 本 更 新 ， 阴 影 属 
性 已 获得 各 浏览 器 最 新 版 本 的 支持 ， 不 需要 加 前 级 。 


3.1.2 ”溢出 文本 处 理 一 一 text-overflow 属性 


-个 布局 良好 的 页 面 ， 会 限制 列表 结构 的 宽度 。 如 果 文 本 过 长 ， 则 会 导致 文本 溢出 ， 
打 乱 页 面 的 整体 布局 ， 需 要 截断 显示 。 为 了 显示 友好 ，CSS 3 新 增 了 溢出 文本 处 理 的 属性 
text-overflow。text-overflow 属性 的 语法 如 下 : 


text-overflow : clip | ellipsis | ellipsis-word 


取 值 说 明 : 值 clip 表示 直接 裁 切 溢出 的 文本 ; 值 ellipsis 表示 文本 溢出 时 ， 显 示 省 略 标 
记 〈.…) ， 省 略 标记 代替 最 后 一 个 字符 ; 值 ellipsis-word 也 表示 文本 溢出 时 ， 显 示 省 略 标记 
(...) ， 与 值 ellipsis 不 同 的 是 ， 省 略 标记 代替 的 是 最 后 一 个 词 。 

【示例 3-4】 溢出 文本 省 略 标记 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 溢 出 文本 处 理 </title> 

<style type="text/css"> 

下 3 二 
list-style:none; 
line-height:22px; 
font-size:12px; 
border-bottom:1lpx solid #ccc; 


width:220px; /* 设置 宽度 */ 
overflow:hidden; /* 溢出 内 容 设 为 隐藏 */ 
white-space:nowrap; /* 强制 文本 单行 显示 */ 
text-overflow:ellipsis; /* 设置 溢出 文本 显示 为 省 略 标记 */ 
} 
</style> 


。34 。 


第 3 章 文本 、 背 景 、 边 框 不 再 单调 


<body> 

<ul> 
<1i>。 分 享 开发 HTML 5 手机 游戏 的 5 个 注意 </1i> 
<1i>。 四 川 射 洪 县 动物 园 一 头 黑熊 翻 墙 逃走 副 县 长 率 队 搜捕 M</1i> 
<1i>。 《牵挂 》 人 台湾 热 播 张国强 受 宝 岛 粉丝 追捧 </1i> 
<1i>。 黄 怒 波 回 应 质疑 :并非 购 买 冰岛 国土 而 是 投资 地 产 </1i> 
<1i>。 冰岛 总 统 接受 专访 力 挺 中 国富 豪 买 地 </1i> 


</ul> 

</body> 

</html> 

运行 结果 如 图 3-8 所 示 。 

代码 分 析 : 示例 3-4 中 ， 仅 设置 text-overflow 属 。 分享 开发 HTIL 手 机 游戏 的 5 个 注意 要 点 
性 是 不 够 的 。 必 须 设 置 文本 外 围 的 宽度 、 溢 出 内 容 为 a 
2 i ES ， 《牵挂 》 台 湾 热 国 
隐藏 (overflow:hidden ) 、 强 制 文本 单行 显示 ， 黄 好 站 回应 质疑 ;并非 购买 冰 名 国士 … 
(white-space:nowrap) ， 这 样 设置 的 text-overflow 属 。 冰岛 总 统 接受 专访 力 挺 中 国富 豪 习 地 


性 值 ellipsis 才能 显示 为 省 略 标 记 的 效果 。 


名 提示 : 在 兼容 性 方面 ，Firefox 和 早期 的 Opera 不 
支持 该 属性 ， 其 他 浏览 器 均 支 持 。 


图 3-8 文本 溢出 处 理 


3.1.3 对齐 的 文字 才 好 看 一 一 word-wrap 和 word-break 属性 


-个 布局 很 好 的 页 面 ， 常 常会 因为 换行 ， 导 臻 整个 页 面 参差 不 齐 。CSS 3 采用 了 正 发 
展 的 word-wrap 属性 和 word-break 属性 ， 这 两 个 属性 在 正 中 一 直 被 支持 。 


1. 边界 换行 属性 word-wrap 


word-wrap 属性 ， 设 置 或 检索 当前 行 超过 指定 容器 的 边界 时 是 否 断 开 转行 。 其 语法 
如 下 : 


word-wrap : normal | break-word 


取 值 说 明 : 值 normal 为 默认 的 连续 文本 换行 ,允许 内 容 超 出 边界 ; 值 break-word 表示 
内 容 将 在 边界 内 换行 ， 如 果 需 要 ， 词 内 换行 (word-break) 也 会 发 生 。 
【示例 3-$】 网 址 的 边界 换行 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 边 界 换行 </title> 
<style type="text/css"> 
ET 
font-family:Verdana, Geneva, sans-serif; 
border:1lpx solid #CCC; 
padding:10px; 
width:220px; 
font-size:12px; 
word-wrap:normal; /* 设置 换行 属性 */ 
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</style> 

<body> 

<p> CSS3 is completely backwards compatible, so you will not have to change 
existing designs. Browsers will always support CSS2. http://www-. 
w3schools.com/css3/css3 intro.asp </p> 

<p>CSS3 的 是 完全 向 后 兼容 ， 所 以 你 不 会 有 改变 现 有 的 设计 。 浏览 器 将 始终 支持 CSS2。 
http://www.w3schools.com/css3/css3 intro.asp</p> 

</body> 

</html> 


运行 结果 如 图 3-9 所 示 。 

代码 分 析 : 示例 3-5 中 ， 设 置 word-wrap 属性 值 为 normal， 当 连续 的 文本 如 网 址 ) 
过 长 时 ， 会 超出 边界 显示 。 如 果 word-wrap 属性 值 为 break-word， 则 网 址 不 会 超出 边界 。 
修改 word-wrap 属性 值 如 下 : 

word-wrap:break-word; /* 设置 换行 属性 为 break-word */ 


运行 结果 如 图 3-10 所 示 。 


CSS3 is completely backwards 
compatible, so you will not have to 
change existing designs, Browsers 
will aways support CSS2， 
http://www.w3schools.com/css3/css 
3_intro.asp 


CSS3 is completely backwards 
compatible, so you will not have to 

change existing designs. Browsers 

will always support CSS2, 
http://www.w3schools,com/css3/css3_intro.asp 


CSS3 的 是 完全 向 后 兼容 ， 所 以 你 不 会 有 改 
变现 有 的 设计 。 浏览 器 将 始终 支持 


CSS3 的 是 完全 向 后 兼容 ， 所 以 你 不 会 有 改 
变现 有 的 设计 。 浏览 器 将 始终 支持 


CSS2。 CSS2。 
http://www.w3schools.com/css3/css3_intro.asp http://www.w3schools.com/css3/css 
3_intro.asp 


图 3-9 超出 边界 的 网 址 图 3-10 边界 内 换行 的 网 址 


2. 字 内 换行 属性 word-break 


word-break 属性 设置 或 检索 对 象 内 文本 的 字 内 换行 行为 ， 尤 其 在 出 现 多 种 语言 时 。 对 
于 中 文 ， 应 该 使 用 break-all。 其 语法 如 下 : 


word-break : normal | break-all | keep-all 


取 值 说 明 : 值 normal， 依 照 亚洲 语言 和 非 亚洲 语言 的 文本 规则 ， 允 许 在 字 内 换行 ， 值 
break-all， 该 行为 与 亚洲 语言 的 normal 相同 ， 也 允许 非 亚洲 语言 文本 行 的 任意 字 内 断 开 ， 
该 值 适 合 包含 一 些 非 亚洲 文本 的 亚洲 文本 ; 值 keep-all, 与 所 有 非 亚洲 语言 的 normal 相同 。 
对 于 中 文 、 韩 文 、 日 文 ， 不 允许 字 断 开 ， 适 合 包 含 少量 亚洲 文本 的 非 亚 洲 文本 。 

该 属性 的 值 与 使 用 的 语言 有 关系 。 下 面 就 通过 示例 了 解 其 区 别 。 

【示例 3-6】 文字 内 换行 。 


<!DOCTYPE HTML> 
<html> 
<head> 
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<meta charset="utf-8"> 


<title> 文 字 内 换行 </title> 
<style type="text/css"> 


pl 


font-family:Verdana, Geneva, sans-serif; 
border:1lpx solid #CCC; 
padding:10px; 


width:220px; 


font-size:12px; 


word-break: break-all; 


| 
</style> 
<body> 


/* 设置 换行 属性 */ 


<p> CSS3 is completely backwards compatible, so you will not have to change 
existing designs. Browsers will always support CSS2. http://www.w3schools. 
com/css3/css3 intro.asp </p> 
<p>CSss3 的 是 完全 向 后 兼容 ， 所 以 你 不 会 有 改变 现 有 的 设计 。 浏览 器 将 始终 支持 CSS 2。 


http://www.w3schools.com/css3/css3 intro.asp</p> 


</body> 
</html> 


运行 结果 如 图 3-11 所 示 。 


CSS3 is completely backwards compa 
tible, so you will not have to change 
existing designs. Browsers will alway 
s support CSS2, http://www.w3scho 
ols.com/css3/css3_intro.asp 


CSS3 的 是 完全 向 后 兼容 ， 所 以 你 不 会 有 改 
变现 有 的 设计 。 浏览 器 将 始终 支持 CSS2 
»。 http://www.w3schools.com/css3/c 
ss3_intro.asp 


图 3-11 文字 内 换行 


代码 分 析 : 示例 3-6 中 , 将 word-break 属性 值 设 为 break-all。 运行 结果 如 图 3-11 所 示 ， 
将 文字 拆 分 并 换行 。 
如 果 将 属性 word-break 属性 值 设 为 normal， 运 行 结果 将 如 图 3-9 所 示 。 如 果 将 其 属性 
值 设 为 keep-all， 在 本 示例 中 ， 运 行 结 果 也 将 如 图 3-9 所 示 。 


3.1.4 使 用 服务 器 端的 字体 一 一 @font-face 规则 


在 CSS 的 字体 样式 中 ， 通 常会 受到 客户 端的 限制 ， 只 有 在 客户 端 安装 了 该 字体 后 ， 样 
式 才 能 正确 显示 。 如 果 使 用 的 不 是 常用 的 字体 ， 对 于 没有 安装 该 字体 的 用 户 而 言 ， 是 看 不 


到 真正 的 文字 村 


式 的 。 


因 


此 ， 设 计 师 会 避免 使 用 不 常用 的 字体 ， 


更 不 敢 使 用 艺术 字体 。 


为 了 弥补 这 个 缺陷 ，CSS 3 新 增 了 字体 自 定义 功能 ， 通 过 @font-face 规则 来 引用 互联 


网 任 一 服务 器 中 存在 的 字体 。 这 样 在 设计 页 面 的 时 候 ， 就 不 会 因 


字体 稀缺 而 受 限制 。 
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1. @font-face 的 语法 规则 


@font-face 能 够 加 载 服务 器 端的 字体 文件 ， 让 客户 端 显示 客户 端 所 没有 安装 的 字体 。 
其 语法 规则 如 下 : 
efont-face: {属性 : 取 值 ;} 


DOOOODO DO 


属性 及 取 值 如 下 。 


font-family: 设置 文本 的 字体 名 称 。 

font-style: 设置 文本 样式 。 

font-variant: 设置 文本 是 否 为 小 型 大 写字 母 大 小 写 。 

font-weight: 设置 文本 的 粗细 。 

font-stretch: 设置 文本 是 否 横向 的 拉 伸 变形 。 

font-size: 设置 文本 字号 大 小 。 

src: 设置 自 定义 字体 的 相对 路 径 或 者 绝对 路 径 ， 可 包含 format 信息 。 此 属性 只 能 
在 @font-face 规则 里 使 用 。 


其 中 ，font-family 的 属性 值 是 用 来 声明 字体 名 称 的 ， 该 名 称 可 被 当 作 字 体 引用 。src 也 
是 必要 的 属性 ， 用 于 指定 字体 文件 的 路 径 。 其 他 属性 ， 则 是 选择 性 使 用 的 。 


全 提示 : 对 于 @font-face 的 兼容 ， 主 要 是 字体 format 的 问题 。 因 为 不 同 的 浏览 器 对 字体 格 


式 的 支持 是 不 一 致 的 , 各 种 版 本 的 浏览 器 支持 的 字体 格式 有 所 区 别 。TureTpe(.ttf) 
格式 的 字体 对 应 的 format 属性 为 “truetype”; OpenType(.otf) 格 式 的 字体 对 应 的 
format 属性 为 “opentype”; Embedded Open Type(.eot) 格 式 的 字体 对 应 的 format 


属性 为 “eot”。 
2. 示例 介绍 


【示例 3-7】 使 用 服务 器 端 字体 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>@font-face 规则 </title> 

<style type="text/css"> 

@font-face { 
font-family: myfont; /* 声明 字体 名 称 */ 
src:url(../font/HEMIHEAD.TTF) format("truetype"); 

/* 指定 字体 文件 路 径 */ 

} 

Bt 
font-family:myfont; /* 使 用 声明 的 字体 名 称 定义 字体 样式 */ 
font-size:36px; 
color:#f£90; 

|: 

</style> 

<body> 

<p>Hemi Head</p> 

</body> 

</html> 


。38 。 


第 3 章 _ 文本、 背景、 边框 不 再 单调 


运行 结果 如 图 3-12 所 示 。 
代码 分 析 : 如 示例 3-7 所 示 ， 在 @font-face 的 规则 里 ， 


通过 font-family 属性 声明 了 字体 名 称 myfont， 并 通过 src Hemi Head 
指定 了 字体 文件 的 url 相对 地 址 。 在 接 下 来 的 样式 设置 中 ， 

就 可 以 通过 名 称 myfont 来 引用 字体 定义 的 规则 了 。 该 示例 

展示 的 字体 名 称 为 "Hemi Head 426” 的 字体 , 效果 如 图 3-12 图 3-12 服务 器 端的 字体 


所 示 。 


通过 @font-face 的 规则 使 用 服务 端 字体 ， 为 网 页 设计 者 们 提供 了 更 大 的 自由 空间 。 服 
务 器 端的 字体 可 以 根据 需要 ， 不 受 限 制 地 选择 ， 甚 至 可 以 选择 艺术 字体 。 


全 提示 : 


的 名 ie 规则 使 用 由 大 中字 体 ， 不 建议 应 用 于 中 文 网 站 。 因 为 中 文 的 字体 
文件 都 是 几 MB 到 十 几 MB， 这 么 大 的 字体 文件 ， 会 严重 影响 网 页 的 加 载 速度 。 
如 果 是 少量 的 特殊 字体 ， 还 是 建议 使 用 图 片 来 代替 。 而 英文 的 字体 文件 只 有 几 十 
KB， 非 常 适合 使 用 @font-face 规则 。 


如 果 客 户 端 安装 的 字体 丰富 ， 包 含 了 服务 器 端 提 供 的 字体 ， 出 于 性 能 的 考虑 ， 我 们 会 
尽 可 能 地 选择 客户 端的 字体 ， 以 避免 字体 文件 的 网 络 传输 中 造成 的 性 能 损失 。 可 以 将 规则 
中 src 属性 的 值 通过 “local0” 来 指定 本 地 系统 的 字体 。 利 用 src 属性 可 以 同时 指定 多 个 地 
址 的 特性 ， 我 们 将 示例 3-7 修改 如 下 。 

【示例 3-8】 同时 定义 客户 端 和 服务 器 端 字体 。 

<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>@font-face 规则 </title> 


<style type="text/css"> 
@font-face { 


} 


font-family: myfont; /* 声明 字体 名 称 */ 
src:local ("Hemi Head 426"), /* 指向 客户 端 本 地 系统 字体 */ 
url(../font/SUPERSOU.TTF) format("truetype"); 
/* 指向 服务 器 端的 字体 文件 */ 


font-family:myfont; /* 使 用 声明 的 字体 名 称 定义 字体 样式 */ 
font-size:36px; 
Color:#f£90; 


</style> 

<body> 
<p>@font-face</p> 
</body> 

</html> 


运行 


结果 如 图 3-13 和 图 3-14 所 示 。 


font-fFace afont-face 
图 3-13 显示 客户 端 字 体 图 3-14 显示 服务 器 端 字体 
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代码 分 析 : 示例 3-8 中 ，@font-face 规则 里 的 src 属性 ， 同 时 指定 了 客户 端 系统 中 的 字 
体 和 服务 器 端 提供 的 字体 文件 。 当 客户 端 存在 字体 “Hemi Head 426” 时 ， 显 示 结 果 如 图 
3-13 所 示 ; 当 客 户 端 不 存在 该 字体 时 ， 则 使 用 服务 端 提供 的 字体 “Supersoulfighter”， 显 
示 结 果 如 图 3-14 所 示 。 本 示例 为 了 说 明 问 题 ， 而 选择 了 两 种 不 同 的 字体 。 


3.1.5 “实验 室 : 丰富 的 文字 样式 


在 前 几 节 中 学 习 了 文本 阴影 属性 ， 对 文本 的 修饰 更 加 灵活 ， 而 使 用 @font-face 规则 ， 
使 得 选择 的 字体 几乎 不 受 限制 。 对 于 服务 器 提供 的 字体 ， 也 可 以 使 用 阴影 、 颜 色 、 粗 体 、 
斜体 等 样式 表 进 行 修饰 。 文 字样 式 相 比 之 前 丰富 了 很 多 。 下 面 就 结合 学 过 的 文字 样式 ， 对 
文字 进行 多 方面 修饰 。 

【示例 3-9】 修饰 唐诗 《游子 吟 》。 

<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 唐 诗 《 游 子 吟 》</title> 


<style type="text/css"> 
@font-face { 
font-family: myfont; /* 声明 字体 名 称 */ 
srci:url(../font/maozedong .ttf) format("truetype"); 
/* 指向 服务 器 端的 字体 文件 */ 


} 
body { 
padding:0 40px; 
| 
hl { 
float:right; 
width:20px; 
margin:0 0 0 10px7 
padding:0; 
font-family:myfont; /* 使 用 声明 的 字体 名 称 定义 字体 样式 */ 
font-size:33px; /* 大 小 */ 
color:#f£90; /* 颜色 */ 
text-shadow: 3px 3px 3px #333; /* 阴影 */ 
word-wrap:break-word; /* 边界 换行 ， 豆 号 可 在 行 的 开始 位 置 */ 
} 
pA 
float:right; 
width:20px; 
padding:0; 
margin:0 20px 0 0; 
line-height:33px; 
font-family:myfont; /* 使 用 声明 的 字体 名 称 定 义 字体 样式 */ 
font-size:30px; VA 
color:#f£90; /* 颜色 */ 
text-shadow:0 0 lpx #fff; /* 白色 阴影 ， 消 除 锯齿 */ 
word-wrap:break-word; /* 边界 换行 ， 逗 号 可 在 行 的 开始 位 置 */ 
} 
footer { 


float:right; 
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width:20px; 
padding-top:80px; 
font-family:myfont; 
font-size:30px; 
Color:#£90; 
text-shadow:0 0 3px #333; 
margin-right:30px; 

. 

</style> 

<body> 

<h1> 游 子 吟 </h1> 

<p> 慈 母 手 中 线 ，</p> 

<p> 游 子 身上 衣 。</p> 

<p> 临 行 密 密 缝 ，</p> 

<p> 意 恐 迟 迟 归 。</p> 

<p> 谁 言 寸 草 心 ，</p> 

<p> 报 得 三 春晖 ? </p> 

<footer> 孟 郊 </footer> 

</body> 

</html> 


运行 结果 如 图 3-15 所 示 。 


/* 使 用 声明 的 字体 名 称 定义 字体 样式 */ 
/* 大 小 +/ 
/* 颜色 */ 
/* 阴影 */ 


”人 

”Shen 

”NAN 
sw 入 


上 


图 3-15 经 过 修饰 的 服务 器 端 字体 


代码 分 析 : 在 传统 的 文字 修饰 方面 ， 为 了 突出 某 个 文字 ， 只 能 使 用 加 粗 和 斜体 ， 在 示 


例 3-9 中 ， 使 用 了 阴影 属性 修饰 标题 为 阴影 效果 ， 修 饰 作者 名 称 为 发 光 效 果 。 字 体 使 用 的 


是 服务 器 指定 路 径 下 的 “ 草 檀 毅 毛泽东 字体 ”文件 。 排 版 方面 是 模拟 的 ， 边 界 换行 属性 
word-wrap 值 为 break-word， 即 允许 逗号 可 在 行 的 开始 位 置 。 


3.2 ”色彩 模式 和 不 透明 度 


在 CSS 3 之 前 ， 我 们 通常 使 用 的 颜色 都 属于 RGB 色彩 模式 ， 而 且 颜 色 本 身 也 不 能 设 
置 透明 度 。CSS 3 不 但 新 增 了 HSL 色彩 模式 ， 还 增加 了 颜色 本 身 的 不 透明 设置 和 单独 的 不 
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透明 属性 。 这 两 个 色彩 模式 及 不 透明 设置 ， 在 整个 HTML 5 框架 内 都 适用 。 本 节 就 对 新 增 
的 色彩 模式 及 不 透明 设置 进行 讲解 。 


3.2.1 不 再 为 配色 发 愁 一 一 HSL 色彩 模式 


HSL 色彩 模式 是 CSS 3 新 增 的 色彩 模式 ,是 工业 界 的 一 种 颜色 标准 ,通过 对 色调 (Hue)、 
饱和 度 〈Saturation) 、 亮 度 (Lightness) 三 个 颜色 通道 的 变化 及 它们 相互 之 间 的 县 加 来 得 
到 各 式 各 样 的 颜色 。 这 为 颜色 和 色调 的 选择 提供 了 充足 的 余地 。 这 个 标准 几乎 包括 了 人 类 
视力 所 能 感知 的 所 有 颜色 ， 是 目前 运用 最 广 的 颜色 系统 之 一 。 


1. 参数 说 明 
在 CSS 3 中 ，HSL 色彩 模式 的 表示 语法 如 下 : 


hsl (<length>, <percentage>, <percentage>) 


参数 及 取 值 说 明 如 下 。 

口 <length>: 表示 色调 (Hue) 。 衍 生 于 色 盘 ， 可 以 取 任 意 值 。 其 中 该 值 除 以 360 所 
得 的 余数 为 0 表示 红色 ， 为 60 表示 黄色 ， 为 120 表示 绿色 ， 为 180 表示 青色 ， 为 
240 表示 蓝 色 ， 为 300 表示 洋红 色 。 如 图 3-16 所 示 为 色 盘 模型 。 

口 <percentage>: 表示 饱和 度 〈Saturation) 。 表 示 色 调 确定 的 颜色 的 浓度 ， 即 鲜艳 程 
度 。 值 为 百分比 ， 范 围 从 0% 到 100%。0% 表 示 灰 度 , 没有 颜色 ; 100% 说 明 最 鲜艳 。 

口 <percentage>: 表示 颜色 的 明亮 度 (Lightness) 。 值 为 百分比 ， 范 围 从 0% 到 100%。 
0% 最 暗 ，50% 为 均值 ，100% 最 亮 。 

HSL 色彩 模式 中 的 色调 、 饱 和 度 和 亮度 可 用 一 个 圆柱 体 的 空间 模型 来 模拟 ， 圆 柱 里 的 

每 个 点 都 代表 一 个 颜色 值 。 如 图 3-17 所 示 为 HSL 空间 模型 。 


90 


图 3-16 色调 的 色 盘 模型 图 3-17 HSL 空间 模型 


2. 示例 介绍 


网 页 设计 中 的 配色 也 是 有 规律 可 循 的 。 利 用 HSL 色彩 模式 ， 首 先 确定 网 页 的 主 色调 ， 
即 确定 HSL 的 色调 值 ; 然后 通过 调整 饱和 度 和 亮度 ， 即 可 在 同一 色 系 中 选择 颜色 。 这 样 颜 
色 搭 配 不 会 大 离谱 ， 整 体 上 也 有 统一 的 感觉 。 
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【示例 3-10】 主 色 调 为 红色 的 配色 方案 表 。 


<!DOCTYPE HTML> 


<htm1> 

<head> 

<meta charset="utf-8"> 
<title> 配 色 方 案 表 </title> 
<style type="text/css"> 
可 | 


height:20px; 
border:1lpx solid #f00; 


padding:10px; 
height:170px; 
background-color:hs1(0, 0%, 90%); /* 使 用 HSL 模式 的 颜色 值 */ 
color:hs1(0, 100%, 50%); /* 使 用 HSL 模式 的 颜色 值 */ 


font-size:12px; 

text-align:center; 

line-height:25px; 

width:320px; 
} 
人 JE 

width:320px; 

margin:0; 

padqing:10px 0; 

border-top:lpx solid #ccc; 
了 

float:left; 

margin:lpx 0 0 lpx; 

width:50px; 

height:15px; 

list-style:none; 

font-size:12px; 

line-height:15px; 
上 
/* 第 一 行 */ 
li:nth-child(8) {background-color:hsl1(0, 100%, 100%);} 
E th-child(9) {background-color:hsl1(0, 75%, 100%);} 
li:nth-child(10) {background-color:hsl1(0, 50%, 100%);} 
li:nth-child(11) {background-color:hsl1(0, 25%, 100%);} 
li:nth-child(12) {background-color:hsl1(0, 0%, 100%);} 
/* 第 二 行 */ 
li:nth-child(14) {background-color:hsl1(0, 100%, 75%);} 
th-child(15) {background-color:hsl(0, 75%, 75%);} 
th-child(16) {background-color:hsl(0, 50%, 75%);} 
th-child(17) {background-color:hsl1(0, 25%, 75%);} 
li:nth-child(18) {background-color:hsl(0, 0%, 75%);} 
/* 第 三 行 */ 
li:nth-child(20) {background-color:hsl(0, 100%, 50%);} 
li:nth-child(21) {background-color:hsl(0, 75%, 50%);} 
li:nth-child(22) {background-color:hsl(0, 50%, 50%);} 
li:nth-child(23) {background-color:hsl(0, 25%, 50%);} 
li:nth-child(24) {background-color:hsl(0, 0%, 50%);} 
/* 第 四 行 */ 
li:nth-child(26) {background-color:hsl(0, 100%, 25%);} 
th-child(27) {background-color:hsl(0, 75%, 25%);} 
li:nth-child(28) {background-color:hsl(0, 50%, 25%);} 
li:nth-child(29) {background-color:hsl(0, 25%, 25%);} 
li:nth-child(30) {background-color:hsl(0, 0%, 25%);} 
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/* 第 五 行 */ 
li:nth-child(32) {background-color:hsl(0, 100%, 0%);} 
li:nth-child(33) {background-color:hsl(0, 75%, 0%);} 
li:nth-child(34) {background-color:hsl(0, 50%, 0%);} 
li:nth-child(35) {background-color:hsl(0, 25%, 0%);} 
li:nth-child(36) {background-color:hsl(0, 0%, 0%);} 
</style> 
<body> 
<div class="hsl"> 
<div> 色 调 : 0 红色 </div> 
<div> 竖 向 : 亮度 ; 横向 : 饱和 度 </div> 
<ul> 
<1i></1i> <1i>100%</1i> <1i>73%</1i> <1li>50%</1i> <li>25%</1i> <l1i>0% 
5 和 让 从 
<Ii>100%x/Ii> cio</TiS <li></Li> cl/ > <li></lio chi></Ali> 
<1i>75%</1i> <1i></1i><1i></1i> <1i></1i> <1i></1i> <1i></1i> 
<Ii>50%< A <li><All> co</li> <Iio</lis cli>c/li> <Ji></Ei> 
<1i>25%</1i> <1i></1i> <l1i></1i> <1i></1i> <1i></1i> <1i></1Li> 
<1i>0%</1i> <li></1i> <1i></1i> <l1i></1i> <1i></1Li> <1i></1i> 
</ul> 
</div> 
</body> 
</html> 


运行 结果 如 图 3-18 所 示 。 


色 凋 : 0 红色 
竖 向 : 亮度 ; 横向 : 饱和 和 度 


100% 73% 50% 25% 0% 


75% [== js 
50% | | 


图 3-18 主 色调 为 红色 的 配色 方案 表 


代码 分 析 : 示例 3-10 中 ， 在 所 有 有 背景 的 格子 中 ， 色 调 均 为 0， 即 主 色 调 为 红色 。 饱 
和 度 和 亮度 的 变化 ， 都 是 基于 红 色色 调 而 改变 的 颜色 ， 这 样 搭配 的 颜色 方案 ， 是 非常 和 谐 
的 。 当 然 ， 这 里 的 颜色 不 够 详细 ， 可 以 调整 饱和 度 和 这 光度， 调 出 满意 的 颜色 。 
根据 这 个 原理 ， 我 们 可 以 对 每 种 色调 ， 进 行 同样 的 饱和 度 和 亮度 的 调整 ， 这 样 网 页 整 
体 上 不 会 很 花哨 。 
全 提示 : 本 节 讲述 的 HSL 色彩 模式 ， 很 多 人 应 该 是 第 一 次 接触 。 也 许 在 你 的 知识 领域 里 
遇 到 过 HSB 色彩 模式 ， 在 HSB 中 ，H (hues ) 表示 色相 ，S (saturation ) 表示 馅 
和 度 ，B (brightness ) 表示 发 光亮 度 。 但 这 是 两 种 完全 不 同 的 色彩 模式 ，HSB 色 
彩 模式 暂时 不 能 用 于 CSS， 请 勿 混淆 。 


3.2.2 含 不 透明 度 的 一 HSLA 色彩 模式 


HSLA 色彩 模式 是 HSL 色彩 模式 的 延伸 ,在 色调 、 饱 和 度 和 亮度 三 个 要 素 的 基础 上 增 
加 了 不 透明 的 参数 。 使 用 HSLA 色彩 模式 ， 可 以 设计 多 种 方式 的 透明 效果 。 
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1. 参数 说 明 
HSLA 色彩 模式 的 表示 语法 如 下 : 


hsla(<length>, <percentage>, <percentage>,<alpha>) 


参数 及 取 值 说 明 : 前 三 个 参数 与 HSL 色彩 模式 的 含义 及 用 法 完全 相同 。<alpha> 表 示 
不 透明 度 ， 取 值 在 0 到 1 之 间 。 取 值 为 1 时， 与 HSL 色彩 模式 效果 相同 。 


2. 示例 介绍 


使 用 HSLA 色彩 模式 为 背景 的 页 面 元 素 ， 显 示 为 半 透 明 效 果 。 下 面 看 一 个 示例 。 
【示例 3-11】 HSLA 半 透 明 效果 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> HSLA 半 透 明 效果 </title> 
<style type="text/css"> 
WL | 
list-style:none; 
margin:10px; 
padding:0; 
background:url(../images/charactor.png) 10px 0 no-repeat; 
} 
li {height:20px;} 


li:nth-child(1) {background:hsla(40, 50%, 50%, 0.1);} 
li:nth-child(2) {background:hsla(40, 50%, 50%, 0.2);} 
li:nth-child(3) {background:hsla(40, 50%, 50%, 0.3);} 
li:nth-child(4) {background:hsla(40, 50%, 50%, 0.4);} 
li:nth-child(5) {background:hsla(40, 50%, 50%, 0.5);} 
li:nth-child(6) {background:hsla(40, 50%, 50%, 0.6);} 
li:nth-child(7) {background:hsla(40, 50%, 50%, 0.7);} 
li:nth-child(8) {background:hsla(40, 50%, 50%, 0.8);} 
li:nth-child(9) {background:hsla(40, 50%, 50%, 0.9);} 


li:nth-child(10) {background:hsla(40, 50%, 50%, 1);} 
</style> 
<body> 
<ul> 
<1i></1i><1i></1i><1i></1i><1i></1i><]1i></1i> 
<IiS</liS><LiS</LiS<1i></Ti><1TiS</TiS<1i></1i> 
</ul> 
</body> 
</html> 


运行 结果 如 图 3-19 所 示 。 

代码 分 析 : 如 示例 3-11 中 ， 为 了 衬托 透明 度 ， 外 框 
也 元 素 设 置 了 一 个 文字 背景 图 , 元素 里 的 背景 颜色 的 不 
透明 度 逐 步 增加 。 如 图 3-19 所 示 ， 随 着 颜色 的 不 透明 度 
加 深 ， 背 景 图 片 显 示 越 来 越 模糊 。 


3.2.3 含 不 透明 度 的 一 一 RGBA 色彩 模式 


RGBA 色彩 模式 是 RGB 色彩 模式 的 延伸 。 在 红 、 绿 、 图 3-19 HSLA 半 透 明 效果 
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蓝 、 三 原色 的 基础 上 增加 了 不 透明 度 参 数 。 使 用 HSLA 色彩 模式 ， 也 可 以 设计 多 种 方式 的 
透明 效果 。 

1. 参数 说 明 

RGBA 色彩 模式 的 表示 语法 如 下 : 


rgba (<red>, <green>, <blue>,<alpha>) 


参数 及 取 值 说 明 如 下 。 
前 三 个 参数 <red> 、<green>、<blue> 分 别 表示 红色 值 、 绿 色 值 、 蓝 色 值 各 自 的 取 值 。 
取 值 范围 可 以 是 正 整数 0 到 255, 也 可 以 是 百分数 值 范围 0.0% 到 100.0%。 但 百分数 值 在 有 
些 浏览 器 中 不 支持 , 所 以 要 慎 用 。<alpha> 表 示 不 透明 度 , 取 值 在 0 到 1 之 间 。 取 值 为 1 时 ， 
与 RGB 色彩 模式 效果 相同 。 


2. 示例 介绍 


使 用 RGBA 色彩 模式 为 背景 的 页 面 元 素 ， 显示 为 半 透 明 效 果 。 与 HSLA 色彩 模式 用 法 
很 类 似 ， 直 接 改 编 示 例 3-11 中 的 样式 表 如 下 。 
【示例 3-12】 RGBA 半 透 明 效 果 。 


<style type="text/css"> 
ul { 
list-style:none; 
margin:10px; 
padding:0; 
background:url(../images/charactor.png) 10px 0 no-repeat; 


; 
1i {height:20px;} 


li:nth-child(1) {background:rgba(255, 153, 0, 0.1);} 
li:nth-child(2) {background:rgba(255, 153, 0, 0.2);} 
li:nth-child(3) {background:rgba(255, 153, 0, 0.3);} 
li:nth-child(4) {background:rgba(255, 153, 0, 0.4);} 
li:nth-child(5) {background:rgba(255, 153, 0, 0.5);} 
li:nth-child(6) {background:rgba(255, 153, 0, 0.6);} 
li:nth-child(7) {background:rgba(255, 153, 0, 0.7);} 
li:nth-child(8) {background:rgba(255, 153, 0, 0.8);} 
li:nth-child(9) {background:rgba(255, 153, 0, 0.9);} 


li:nth-child(10) {background:rgba(255, 153, 0, 1);} 

</style> 

运行 结果 如 图 3-20 所 示 。 

代码 分 析 ， 在 示例 3-12 中 ， 为 了 衬托 透明 度 ， 外 框 | 位 
ul 元 素 也 设置 了 一 个 文字 背景 图 ，1i 元 素 里 的 背景 颜色 的 
不 透明 度 逐 步 增加 。 如 图 3-20 所 示 ， 随 着 颜色 的 不 透明 度 
加 深 ， 背 景 图 片 显示 越 来 越 模糊 。 


3.2.4 不 透明 度 一 一 opacity 属性 


在 CSS3 中 ,除了 HSLA 和 RGBA 两 种 色彩 模式 可 以 图 3-20 RGBA 半 透 明 效 果 
设置 半 透 明 效果 之 外 ， 还 有 专门 的 不 透明 属性 opacity， 可 
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以 设置 半 透 明 效果 。 该 属性 可 以 应 用 于 任何 页 面 元 素 中 。 
1. 参数 说 明 


opacity 属性 的 语法 如 下 : 


opacity : <alpha> | inherit 


参数 及 取 值 说 明 如 下 。 

口 <alpha>: 表示 不 透明 度 ， 取 值 在 0 到 1 之 间 。 默 认为 1， 表示 完全 不 透明 ; 0 表示 
完全 透明 。 

口 inherit: 该 值 表示 继承 父 元 素 的 不 透明 度 。 


全 提示 : 在 下 8 及 以 前 的 浏览 器 版 本 中 的 透明 效果 , 使 用 filter 来 设置 : filter:alpha(opacity= 
<value>)，<value> 的 取 值 范围 与 opacity 属性 的 <alpha> 相 同 。 


2. 示例 介绍 


使 用 opacity 属性 ， 可 针对 某 个 页 面 元 素 设置 半 透 明 效 果 。 
【示例 3-13】 图 片 的 半 透 明 效 果 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 半 透明 效果 </title> 
<style type="text/css"> 
Ul 
list-style:none; 
margin:10px; 
padding:0; 
background:url(../images/charactor.png); 
height:160px; 
B 
Ei 
float:left; 
margin:S5px; 
width:200px; 
height:150px; 
} 
li:nth-child(1) {opacity:0.5;} 
li:nth-child(2) {opacity:0.8; } 
</style> 
<body> 
<ul> 
<li><img src="../images/bird.png" alt=" 岛 " /></1i> 
<li><img src="../images/bird.png" alt=" 岛 " /></1i> 
<1i><img src="../images/bird.png" alt=" 岛 "” /></1i> 
</ul> 
</body> 
</html> 


运行 结果 如 图 3-21 所 示 。 
代码 分 析 : 在 示例 3-13 中 ， 为 了 展示 半 透 明 效果 ， 在 则 元 素 中 设置 了 文字 背景 图 。 
我 们 为 三 个 元 素 内 都 添加 了 图 片 ， 并 针对 1 元 素 分 别 设置 了 不 同 的 opacity 属性 值 。 由 


Cy 
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图 3-21 所 示 ， 内 部 的 图 片 内 容 也 应 用 了 半 透 明 效果 。 


图 3-21 页 面 的 半 透 明 效果 


名 提示 :，opacity 属性 的 不 透明 度 ， 可 以 应 用 于 各 个 页 面 元 素 及 其 内 部 的 内 容 。 


3.2.5 ”实验 室 : 半 透 明 的 遮蔽 层 


透明 的 遮蔽 层 来 遮挡 页 面 的 其 他 内 容 ， 以 增强 用 户 体验 。 下 面 就 用 学 过 的 不 透明 度 知 识 来 
实现 图 片 的 预览 。 
【示例 3-14】 半 透 明 的 遮蔽 层 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 半 透明 的 遮蔽 层 </title> 
<style type="text/css"> 
ul { 
list-style:none; 
margin:10px; 


padding:0; 
height:160px; 
| 
float:left; 
margin:S5px; 
width:100px; 
height:80px; 
| 
li img { 
width:100px; 
height:80px; 
opacity:0.5; /* 列表 图 片 的 不 透明 度 设置 为 0.5 */ 
cursor:pointer; 
| 
li img:hover { 
opacity:1; /* 列表 图 片 的 不 透明 度 设置 为 1 */ 
-bg { 


position:absolute; 
background-color:hsla(0, 0%, 50%, 0.5); 
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/* 谈 需 层 的 背景 设置 为 不 透明 度 为 0.5 的 黑色 */ 


.oan 
left:0; 
| 
-box { 


position:absolute; 
top:130px; 
left:150px; 
z-index:99; 
border-radius:4px; 
padding:5px; 
background-color:#fff; 
line-height:20px; 
font-size:12px; 
Color:#666; 
font-weight:bold; 


} 


:box a 并 
display:block; 
position:absolute; 
z-index:100; 
top:-8px; 
left:498px; 
border-radius:9px; 
border:2px solid #e4e4e4; 
background-color:#bbb; 
line-height:14px; 
width:14px; 
text-align:center; 
font-family:Arial, Helvetica, sans-serif; 
font-size:14px; 
Color:#FFF; 
text-decoration:none; 


J); 


.box img { 
width:300px; 
height:200px; 


. 


</style> 
<script type="text/javascript"> 


// 打 开 图 片 预览 


function popbox (obj){ 


// 创 建 半 透 明 的 遮蔽 层 

document .body.style.overflow="hidden"; 
var Ww = window.innerWidth; 

var h = window.innerHeight; 

var bgdiv = document.createElement ("div"); 
bgdiv.style.width = w + "px"; 
bgdiv.style.height = h + "px"; 
bgdiv.className = "bg"; 

bgdiv.id = "bg"; 

document .body.appendChild (bgdiv); 

// 创 建 图 片 预 览 层 

Var box = document .createElement ("div"); 
box.id = "floatbox"; 

box.className = "box"; 


box.innerHTML="<a href="'javascript:closebox()'>&times;</a>"; 


box.innerHTML+="<img src="+ obj.srct" />"; 
if (obj.alt){ 


box.innerHTML+="<div>"+ obj.alt+"</div>"; 


第 2 篇 基于 CSS 3 的 Web 界面 设计 实战 


} 

// 图 片 预览 的 居中 定位 
box.style.left=(w-510) /2+"px"; 
box.style.top=(h-405) /2+"px"; 
document .body.appendChild (box); 


// 关 闭 图 片 预览 

function closebox(){ 
document .body.style.overflow=""; 
Var bg=document .getElementById ("bg"); 
bg.parentNode .removeChild (bg); 
Var box=document .getElementById("floatbox"); 
box.parentNode.removeChild (box); 


} 


} 

</script> 

<body> 

<ul> 
<1i><img src="../images/J10.jpg" alt=" 歼 10 战斗 机 " onclick="popbox (this)" 
/></1i> 
<li><img src="../images/F22.jpg"” alt="F22 战斗 机 " onclick="popbox (this)" 
/></1i> 
<1i><img src="../images/Su35.jpg" alt=" 苏 35 战斗 机 " onclick="popbox 
(this)" /></1i> 

</ul> 

</body> 

</html> 


运行 结果 如 图 3-22 所 示 。 


© | yrr740:8080/hc/Chapter3/Code3-14. htnl 


图 3-22 ” 半 透 明 谈 项 层 
代码 分 析 : 在 示例 3-14 中 ， 设 置 了 列表 图 片 的 不 透明 度 0.5， 和 鼠标 滑 过 图 片 ， 不 透明 


度 变 为 1， 即 图 片 变 得 清晰 ， 把 遮蔽 层 的 CSS 类 样式 (.bg) 的 背景 颜色 指定 为 带 不 透明 度 
设置 的 颜色 ， 来 实现 半 透 明 效 果 ， 该 类 样式 会 在 图 片 函数 popbox0 中 调用 。 


。S0 。 


第 3 章 文本 、 背 景 、 边 框 不 再 单调 


33 背 景 


在 布局 和 美化 网 页 方面 ， 常 常 离 不 开 对 背景 的 设置 。 在 传统 的 CSS 背景 设计 中 ， 由 于 
功能 的 局 限 ， 设 计 师 的 灵感 难以 尽情 发 挥 。 为 了 使 背景 设计 更 加 灵活 ，CSS 3 增强 了 原 有 
背景 属性 的 功能 , 并 增添 了 一 些 新 的 背景 属性 。 不 但 可 以 在 同一 元 素 内 县 加 多 个 背景 图 像 ， 
也 可 以 对 背景 图 像 的 原点 位 置 、 显 示 区 域 和 大 小 方面 进行 调整 和 控制 。 


3.3.1 元 素 里 定义 多 个 背景 图 片 


CSS 3 中 ， 可 以 对 一 个 元 素 应 用 一 个 或 多 个 图 片 作为 背景 。 代 码 和 CSS 2 中 的 一 样 ， 
只 需要 用 逗号 来 区 别 各 个 图 片 。 第 一 个 声明 的 图 片 定位 在 元 素 顶 部 ， 其 他 的 图 片 依次 在 其 
下 排列 。 

1. 参数 说 明 

定义 页 面 元 素 的 背景 语法 如 下 : 


Background : [background-image] | [background-origin] | [background-clip] 
| [background-repeat] | [background-size] | [background-position] 
参数 及 取 值 说 明 如 下 。 
<background-image>: 指定 或 检索 对 象 的 背景 图 像 。 
<background-origin>: 指定 背景 的 原点 位 置 ， 属 于 新 增 的 属性 。 
<background-clip>: 指定 背景 的 显示 区 域 ， 属 于 新 增 的 属性 。 
<background-repeat>: 设置 或 检索 对 象 的 背景 图 像 是 否 及 如 何 重复 铺 排 。 
<background-size>: 指定 背景 图 片 的 大 小 ， 属 于 新 增 的 属性 。 
<background-position>: 设置 或 检索 对 象 的 背景 图 像 位置 。 

如 果 定 义 多 重 背景 图 ， 则 用 逗号 隔 开 各 个 背景 图 设置 。 如 果 使 用 子 属性 直接 定义 ， 那 
么 各 个 子 属 性 也 用 逗号 对 应 依次 隔 开 。 


2. 示例 介绍 


下 面 就 通过 一 个 示例 来 展示 多 重 背景 的 定义 方法 。 
【示例 3-15】 多 重 背景 效果 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 多 重 背 景 </title> 

<style type="text/css"> 

body{ 

background:url(../images/icon12.png) 120px 110Px no-repeat, 

url(../images/icon5.png) 400px 10px no-repeat, 
url(../images/J10-2.jpg) no-repeat; 
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i 


第 2 篇 基于 CSS 3 的 Web 界面 设计 实战 


</style> 
<body> 
</body> 
</html> 


运行 结果 如 图 3-23 所 示 。 


图 3-23 ”多重 背 景 合成 效果 


代码 分 析 : 在 示例 3-15 中 ， 设 置 了 三 个 图 片 背 景 ， 中 问 用 逗号 隔 开 ， 均 不 重复 铺 排 。 
写 在 前 面 的 背景 图 像 会 显示 在 上 面 ， 写 在 后 面 的 背景 图 像 则 显示 在 下 面 。 
由 于 background 属性 是 由 众多 子 属性 组 成 的 ， 因 此 示例 3-15 中 的 样式 也 可 以 写 为 : 
body{ 
ee ee : url(../images/icon12.png) 和 url(../images/ 
icon5.png), url(../images/J10-2.jpg); 
background-position : 120px 110pPx , 400px 1l0px , 0 0; 


background-repeat : no-repeat , no-repeat , no-repeat; 
下 


运行 后 有 同样 的 结果 ， 如 图 3-23 所 示 。 
3.3.2 指定 背景 的 原点 位 置 


CSS 3 的 新 增 属性 background-origin 用 来 指定 背景 图 像 的 原点 位 置 。 在 默认 情况 下 ， 
属性 background-position 总 是 以 元 素 边框 以 内 的 左上 角 为 坐标 原点 进行 背景 图 像 定位 。 使 
用 background-origin 属性 可 以 对 该 原点 位 置 进 行 调整 。 


1. 参数 说 明 


属性 background-origin 的 语法 如 下 : 
background-origin: border-box | padding-box | content-box 
取 值 说 明 如 下 。 


口 border-box: 原点 位 置 为 边框 (border) 区 域 的 开始 位 置 。 
口 padding-box: 原点 位 置 为 内 边 距 (padding) 区 域 的 开始 位 置 。 


。52 。 


第 3 章 _ 文本、 背景、 边框 不 再 单调 


口 content-box: 原点 位 置 为 内 容 (content) 区 域 的 开始 位 置 。 
可 见 ， 该 原点 位 置 不 是 通过 直接 给 出 原点 坐标 指定 的 ， 而 是 根据 盒 模型 的 结构 来 确定 
的 ， 这 对 于 网 页 背景 的 布局 有 一 定 的 优势 。 关 于 盒 模型 结构 如 图 3-24 所 示 。 


站 


内 部 边 距 (padding) 


内 容 
(content) 


图 3-24 盒 模 型 结构 图 


提示 : 在 之 前 的 部 分 浏览 器 中 ，background-origin 属性 的 取 值 可 以 为 : border、padding 
和 content， 但 是 不 建议 使 用 ， 因 为 不 符合 最 新 的 CSS 3 规范 ， 而 且 主流 浏览 器 对 
符合 规范 的 取 值 的 支持 更 加 良好 。 


2. 示例 介绍 


下 面 通过 示例 来 学 习 background-origin 属性 各 个 值 的 应 用 效果 。 
【示例 3-16】 背景 的 原点 位 置 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 背 景 的 原点 位 置 </title> 
<style type="text/css"> 
div { 
padding:50px; /* 设置 内 边 距 为 50px */ 
border:50px solid rgba(255，153，0，0.6); /* 设置 边框 宽度 为 50px */ 
height:100px; 
width:200px; 
color:#fff; 
font-size:24px; 
font-weight:bold; 
text-shadow:2px 0 lpx #f£00,-2px 0 lpx #f£00, 
0 2px lpx #f£00, 0 =2px lpx #£00; 
background-image:url(../images/Bridge.jpg); /* 设置 背景 图 像 */ 


background-position:0 0; /* 背景 图 像 起 始 位 为 原点 */ 
background-repeat:no-repeat; /* 背景 图 像 不 平 铺 */ 
-webkit-background-origin:border-box; /* 原点 为 边框 的 开始 (webkit) */ 
-moz-background-origin:border-box; /* 原点 为 边框 的 开始 (moz) */ 


ss 
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background-origin:border-box; /* 原点 为 边框 的 开始 */ 

sy 

<body> 

<div> 内 容 从 这 里 开始 </div> 

</body> 

</html> 

运行 结果 如 图 3-25 所 示 。 

代码 分 析 : 在 示例 3-16 中 , 设置 了 背景 的 起 
始点 为 原点 ， 背 景 开 始 的 位 置 即 是 原点 位 置 ; 为 
了 表现 原点 从 边框 开始 , 这 里 设置 了 宽度 为 50px 
的 边框 ， 且 边框 颜色 为 半 透 明 ， 便 于 看 见 边框 下 
的 背景 。 对 于 属性 background-origin， 二 
性 问题 ， 需 要 针对 多 种 浏览 器 内 核 分 别 写 一 
为 了 突 内 容 过 有 位置， 该 例 也 外 加 了 文学 
样式 。 如 图 3-25 所 示 ， 背 景 图 片 是 从 边框 内 开始 
的 ， 原 点 位 置 即 是 边框 左上 角 位 置 。 

下 面 我 们 将 属性 background-origin 分 别 修改 图 3-25 原点 为 边框 的 开始 
为 padding-box 或 content-box， 如 : 


-webkit-background-origin:padding-box; /* 原点 为 内 边 距 的 开始 (webkit) */ 
-moz-background-origin: padding-box; /* 原点 为 内 边 距 的 开始 (moz) */ 
background-origin: padding-box; /* 原点 为 内 边 距 的 开始 */ 

或 

-webkit-background-origin: content-box; /* 原点 为 内 容 的 开始 (webkit) */ 
-moz-background-origin: content-box; /* 原点 为 内 容 的 开始 (moz) */ 
background-origin: content-box; /* 原点 为 内 容 的 开始 */ 


运行 结果 分 别 如 图 3-26、 图 3-27 所 示 。 


图 3-26 原点 为 内 边 距 的 开始 图 3-27 原点 为 内 容 的 开始 


外 说 明 : 默认 情况 下 ， 背 景 从 边框 开始 显示 。 在 调整 属性 background-origin 的 值 时 ， 背 景 
图 像 的 左上 角 位 置 发 生 了 变化 ， 如 图 3-26 和 图 3-27 所 示 ， 右 下 方 的 背景 仍然 会 
显示 在 边框 区 域 或 内 边 距 区 域 。 
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3.3.3 指定 背景 的 显示 区 域 


CSS 3 的 新 增 属性 background-clip， 用 来 指定 背景 的 显示 区 域 。 在 支持 CSS 3 的 环境 
下 ， 背 景 的 显示 区 域 是 包含 元 素 边框 在 内 的 ， 实 际 使 用 中 ， 或 许 仅 在 内 容 区 域 显示 背景 。 
在 CSS 3 中 ， 可 以 使 用 属性 background-clip 来 修改 显示 区 域 。 


1. 参数 说 明 


属性 background-clip 的 语法 如 下 : 

background-clip: border-box | padding-box | content-box 

取 值 说 明 如 下 。 

口 border-box: 背景 从 边框 (border) 开始 显示 。 

口 padding-box: 背景 从 内 边 距 (padding) 开始 显示 。 

口 content-box: 背景 仅 在 内 容 (content) 区 域 显 示 。 

可 见 ， 该 属性 的 使 用 方法 与 属性 background-origin 一 样 ， 其 值 也 是 根据 盒 模型 的 结构 
来 确定 的 。 这 两 个 属性 常常 会 结合 起 来 使 用 ， 以 达到 对 背景 的 灵活 控制 。 


全 提示 : 在 之 前 的 部 分 浏览 器 中 ，background-clip 属性 的 取 值 可 以 为 : border、padding 和 
content， 但 是 不 建议 使 用 ， 因 为 不 符合 最 新 的 CSS 3 规范 ， 而 且 主流 浏览 器 对 符 
合 规范 的 取 值 的 支持 更 加 良好 。 


2. 示例 介绍 


下 面 通 过 示例 来 对 比 学 习 background-clip 属性 的 各 个 值 的 应 用 效果 。 
【示例 3-17】 背景 的 显示 区 域 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 背 景 的 显示 区 域 </title> 
<style type="text/css"> 


div { 
padding:50px; /* 设置 内 边 距 为 50px */ 
border:50px solid rgba(255, 153, 0, 0.6); /* 设置 边框 宽度 为 50px */ 


height:100px; 

width:200px; 

color:#fff; 

font-size:24px; 
font-weight:bold; 
text—-shadow:2px 0 lpx #f£00, 

-2px 0 lpx #f£00, 

0 2px lpx #f£00, 

0 -2px 1px #f£00; 
background-image:url(../images/Bridge.jpg); /* 设置 背景 图 像 */ 
background-position:0 0; /* 背景 图 像 起 始 位 为 原点 */ 
background-repeat:no-repeat; /* 背景 图 像 不 平 铺 */ 
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-webkit-background-origin:border-box; /* 原点 从 边框 开始 (webkit) */ 
—moz-background-origin:border-box; /* 原点 从 边框 开始 (moz) */ 
background-origin:border-box; /* 原点 从 边框 开始 */ 


-webkit-background-clip:border-box; /* 背景 从 边框 开始 显示 (webkit) */ 
-moz-background-clip:border-box; /* 背景 从 边框 开始 显示 (moz) */ 
background-clip:border-box; /* 背景 从 边框 开始 显示 */ 

} 

</style> 

<body> 

<qdiv> 内 容 从 这 里 开始 </div> 

</body> 

</html> 


运行 结果 如 图 3-28 所 示 。 
代码 分 析 : 示例 3-17 与 示例 3-16 下 
在 示例 3-17 中 , 设置 了 背景 的 起 始点 为 原点 ,背景 


开始 的 原点 位 置 为 边框 的 开始 位 置 ， 同 样 设置 了 半 
透明 边框 便于 观察 ;内容 区 域 也 添加 了 文字 。 如 图 


3-28 所 示 ， 背 景 从 边框 (border) 内 开始 显示 。 
用 同样 的 方法 ， 我 们 将 属性 background-clip 分 别 
修改 为 padding-box 或 content-box， 如 : 


-webkit-background-clip:padding-box; ”/* 背景 从 内 边 距 开始 显示 (webkit) */ 


图 3-28 背景 从 边框 开始 显示 


-moz-background-clip: padding-box; /* 背景 从 内 边 距 开始 显示 (moz) */ 
background-clip: padding-box; /* 背景 从 内 边 距 开始 显示 */ 

或 

-webkit-background-clip: content-box; /* 背景 仅 在 内 容 区 域 显示 (webkit) */ 
-moz-background-clip: content-box; /* 背景 仅 在 内 容 区 域 显示 (moz) */ 
background-clip: content-box; /* 背景 仅 在 内 容 区 域 显示 */ 


运行 结果 分 别 如 图 3-29、 图 3-30 所 示 。 


图 3-29 背景 从 内 边 距 开始 显示 图 3-30 背景 仅 在 内 容 区 域 显示 


全 说 明 : 图 3-29 和 图 3-30 所 示 ， 由 于 背景 显示 区 域 的 限制 ， 背 景 图 像 被 裁剪 了 ， 所 以 该 
显示 区 域 也 叫 裁剪 区 域 ， 该 属性 background-clip 也 叫 背景 裁剪 属性 。 pn 
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用 了 background-origin 属性 ， 以 设置 图 像 的 起 始 位 置 。 说明 这 两 个 属性 常常 会 一 
起 使 用 。 


3.3.4 指定 背景 图 像 的 大 小 


CSS 3 的 新 增 属性 background-size, 用 来 指定 背景 图 像 的 大 小 。 在 传统 的 CSS 设计 中 ， 
背景 图 像 的 大 小 是 不 可 以 改变 的 ， 通 常会 把 同样 的 图 片 ， 做 成 不 同 的 尺寸 ， 以 适应 不 同 大 
小 的 背景 显示 。 在 CSS 3 中 ， 通 过 background-size 属性 ， 可 以 有 多 种 方式 来 指定 背景 图 像 
的 大 小 ， 以 适应 不 同情 况 下 的 需要 。 


1. 参数 说 明 


属性 background-size 的 语法 如 下 : 

background-size : [ <length> | <percentage> | auto ]{1,2} | cover | contain 
取 值 说 明 如 下 。 

口 <length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 

口 <percentage>: 取 值 为 0% 到 100% 之 间 的 值 ， 是 基于 背景 图 像 的 父 元 素 的 百分比 。 
口 cover: 保持 背景 图 像 本 身 的 宽 高 比例 ， 将 图 像 缩放 到 正好 完全 履 盖 所 定义 的 背景 


区 域 。 
口 contain: 保持 背景 图 像 本 身 的 宽 高 比例 ， 将 图 像 缩放 到 正好 适应 所 定义 的 背景 
区 域 。 


background-size 属性 可 以 使 用 <length> 或 <percentage> 来 设置 背景 图 片 的 高 度 和 宽度 。 
第 一 个 值 设 置 宽度 ， 第 二 个 值 设置 高 度 ， 如 果 只 给 出 一 个 值 ， 第 二 个 值 设置 为 “auto”。 

需要 注意 的 是 ，<length> 是 直接 指定 背景 图 像 的 宽 和 高 ;<percentage> 是 基于 背景 图 像 
的 父 元 素 尺寸 的 百分比 ， 来 确定 背景 图 像 的 宽 和 高 ， 其 中 父 元 素 的 计算 尺寸 包含 父 元 素 的 
内 边 距 ， 不 包括 边框 。 


2. 示例 介绍 


background-size 属性 的 使 用 方法 比较 灵活 ， 下 面 通 过 示例 来 说 明 。 
【示例 3-18】 不 同 尺 寸 的 多 重 背景 图 像 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 不 同 尺寸 的 多 重 背 景 图 像 </title> 
<style type="text/css"> 
div { 
margin:10px; 
padding:50px; 
border:1lpx solid #000; 
height:220px; 
width:400px; 
background-repeat:no-repeat; 
background-image:url(../images/WestLake.jpg)  ”/* 最 前 面 背景 图 像 */ 


ey 
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,url(../images/WestLake.jpg) /* 中 间 背 景 图 像 */ 
,url(../images/WestLake.jpg); /* 最 后 面 背 景 图 像 */ 


background-size:30% 30% /* 最 前 面 背景 图 像 尺寸 */ 

,60% 60% /* 中 间 背 景 图 像 尺寸 */ 
,100% 100%; /* 最 后 面 背景 图 像 尺寸 */ 

</style> 

<body> 

<div></div> 

</body> 

</html> 


运行 结果 如 图 3-31 所 示 。 


图 3-31 不 同 尺寸 的 多 重 背 景 图 像 


代码 分 析 : 在 示例 3-18 中 ,设置 三 个 图 片 相同 的 背景 图 像 ， 然 后 分 别 设置 尺寸 。 这 里 
是 使 用 百分比 数值 来 设 定 背景 图 像 大 小 的 。 如 图 3-31 所 示 , 背景 图 像 会 根据 设置 的 图 像 大 
小 分 别 显示 。 


3. 值 cover 与 值 contain 


在 前 面 介绍 background-size 语法 的 时 候 ， 介 绍 了 这 两 个 值 ， 它 们 的 意思 非常 相近 。 为 
避免 混淆 ， 这 里 通过 一 个 示例 来 比较 它们 之 间 的 异同 。 
【示例 3-19】 值 cover 与 值 contain。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 值 cover 与 值 contain</title> 
<style type="text/css"> 
div { 
margin:10px; 
padding:50px; 
border:1lpx solid #000; 
height:150px; 
width:400px; 
background-repeat:no-repeat; 
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background-image:url(../images/WestLake.jpg); /* 背景 图 像 */ 


background-size:cover; /* 值 cover */ 


} 

</style> 
<body> 
<div></div> 
</body> 
</html> 


运行 结果 如 图 3-32 所 示 。 


图 3-32 ”图像 覆盖 整个 背景 区 域 
如 果 将 属性 background-size 的 值 设置 为 contain， 更 改 如 下 : 
/* 值 contain*/ 


background-size: contain; 


其 运行 结果 如 图 3-33 所 示 。 


图 3-33 图像 未 覆盖 整个 背景 区 域 


代码 分 析 : 在 示例 3-19 中 , 背景 图 像 都 产生 了 缩放 。 不同 的 是 , 当 属性 background-size 
的 值 为 cover 时 ， 背 景 图 像 按 比例 缩放 ， 直 至 覆盖 整个 背景 区 域 为 止 ， 但 可 能 会 裁剪 掉 部 
分 图 像 ， 如 图 3-32 所 示 。 当 属性 background-size 的 值 为 contain 时 ， 背 景 图 像 会 完全 显示 
出 来 ， 但 可 能 不 会 完全 覆盖 背景 区 域 ， 如 图 3-33 所 示 。 


3.3.5 ”实验 室 : 设计 信纸 的 效果 


本 节 我 们 就 用 学 过 的 背景 样式 知识 , 制作 一 个 信纸 的 效果 。 仍然 使 用 多 重 背 景 的 方法 ， 
。59 。 


第 2 篇 


基于 CSS 3 的 Web 界面 设计 实战 


把 多 个 图 片 同 时 作为 背景 来 显示 ， 以 实现 信纸 效果 。 


1. 背景 图 像素 材 


本 节 所 介绍 的 案例 中 ， 将 会 使 用 6 个 图 片 作为 背景 图 像素 材 。 其 中 信纸 的 4 个 角 各 有 
一 个 背景 图 片 ， 信 纸 本 身 的 沙砾 效果 的 背景 和 横 线 背景 ， 如 图 3-34 所 示 。 


， 
bd 


图 3-34 设计 信纸 的 背景 素材 


【示例 3-20】 信纸 的 效果 。 


<!DOCTYPE HTML> 
<html> 
<head> 


<meta charset="utf-8"> 
<title> 信 纸 的 效果 </title> 
<style type="text/css"> 


div { 
padding:25px; 


border:10px solid rgba(204, 204, 51, 0.8); 


height:300px; 
width:220px; 
font-size:12px; 


line-height:22px; 


background-image:url(../images/line.png), 


wri 
oe 
ue 
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/images/left-top.png), 
/images/right-top.png), 
/images/left-bottom.png), 
/images/right-bottom.png), 
/images/wenli.jpg); 


/* 第 一 个 背景 : 横 线 */ 

/* 第 二 个 背景 :左上 角 背 景 */ 
/* 第 三 个 背景 : 右上 角 背 景 */ 
/* 第 四 个 背景 : 左下 角 背 景 */ 
/* 第 五 个 背景 : 右 下 角 背 景 */ 
/* 第 六 个 背景 : 纹理 背景 */ 
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background-repeat:repeat, /* 第 一 个 背景 : 平 铺 */ 
no-repeat, /* 第 二 个 背景 : 不 平 铺 */ 
no-repeat, /* 第 三 个 背景 : 不 平 铺 */ 
no-repeat, /* 第 四 个 背景 : 不平 铺 */ 
no-repeat, /* 第 五 个 背景 : 不 平 铺 */ 
repeat; /* 第 六 个 背景 : 平 铺 */ 
background-position:left top， /* 第 一 个 背景 : 左上 */ 
left top, /* 第 二 个 背景 : 左上 */ 
right top, /* 第 三 个 背景 : 右上 */ 
left bottom, /* 第 四 个 背景 : 左下 */ 
right bottom, /* 第 五 个 背景 : 右 下 */ 
left top; /* 第 六 个 背景 : 左上 */ 
background-size: 40px 44px, /* 第 一 个 背景 : 固定 尺寸 */ 
20%, /* 第 二 个 背景 : 宽 为 父 元 素 20% 的 大 小 ， 高 自动 */ 
20%， /* 第 三 个 背景 : 宽 为 父 元 素 20% 的 大 小 ， 高 自动 */ 
20%， /* 第 四 个 背景 : 宽 为 父 元 素 20% 的 大 小 ， 高 自动 */ 
20 /* 第 五 个 背景 : 宽 为 父 元 素 20% 的 大 小 ， 高 自动 */ 
20%; /* 第 六 个 背景 : 宽 为 父 元 素 20$ 的 大 小 ， 高 自动 */ 
background-origin: content-box， /* 第 一 个 背景 : 原点 为 内 容 区 域 开始 */ 
border-box, /* 第 二 个 背景 : 原点 为 边框 区 域 开始 */ 
border-box, /* 第 三 个 背景 : 原点 为 边框 区 域 开始 */ 
border-box, /* 第 四 个 背景 : 原点 为 边框 区 域 开始 */ 
border-box, /* 第 五 个 背景 : 原点 为 边框 区 域 开 始 */ 
padding-box; /* 第 六 个 背景 : 原点 为 内 边 距 区 域 开始 */ 
background-clip: content-box， /* 第 一 个 背景 : 背景 仅 在 内 容 区 域 显示 */ 
border-box, /* 第 二 个 背景 : 背景 从 边框 区 域 开始 显示 */ 
border-box, /* 第 三 个 背景 : 背景 从 边框 区 域 开 始 显示 */ 
border-box, /* 第 四 个 背景 : 背景 从 边框 区 域 开始 显示 */ 
border-box, /* 第 五 个 背景 : 背景 从 边框 区 域 开始 显示 */ 
padding-box; /* 第 六 个 背景 : 背景 从 内 边 距 区 域 开始 显示 */ 
es Bat 
margin:0; 


padding:0; 
font-size:14px; 
} 
divpit 
margin:0; 
padding:0; 
text-indent:2em; 
| 
</style> 
<body> 
<div> 
<h1> 致 加 西亚 的 一 封 信 </h1> 
<p> 在 所 有 与 古巴 有 关 的 事情 中 ， 有 一 个 人 常常 令 我 无 法 忘怀 。</p> 
<p> 美 西 战 争 爆发 以 后 ， 美 国 必须 马上 与 西班牙 反抗 军 首领 加 西亚 将 军 取得 联系 。 加 西亚 将 军 隐 
藏 在 古巴 辽阔 的 崇山峻岭 中 一 一 没有 人 知道 确切 的 地 点 ， 因 而 无 法 送信 给 他 。 但 是 ， 美 国 总 统 必须 
尽快 地 与 他 建立 合作 关系 。 怎 么 办 呢 ? </P> 
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<p> 有 人 对 总 统 推荐 说 : &ldquo: 有 一 个 名 叫 罗 文 的 人 ， 如 果 有 人 能 找到 加 西亚 将 军 ， 那 个 人 一 
定 就 是 他 。 &rdquo; </p> 


运行 结果 如 图 3-35 所 示 。 


图 3-35 设计 信纸 的 背景 素材 


代码 分 析 : 在 示例 3-20 中 ,同时 设置 了 6 个 背景 图 片 。 为 了 能 灵活 地 控制 这 些 背 景 图 
片 ， 对 每 一 个 属性 都 用 逗号 间隔 成 6 个 部 分 ， 以 达到 分 别 控制 各 个 背景 图 像 的 目的 。 在 该 
示例 中 ， 同 时 使 用 了 属性 background-size、 属 性 background-origin 和 属性 background-clip， 
足见 新 增 属性 的 强大 与 便利 。 


3.4 边 框 


在 网 页 设计 中 ， 边 框 是 常用 的 美化 手法 之 一 。 在 CSS 3 之 前 ， 页 面 边框 比较 单调 ， 只 
能 设置 边框 的 粗细 程度 和 边框 颜色 ， 如 果 想 使 边框 的 效果 更 加 丰富 ， 只 能 事先 设计 好 边框 
图 片 ， 然 后 通过 使 用 背景 或 直接 插入 图 片 的 方式 来 实现 。 在 CSS 3 中 ， 通 过 样式 表 设置 ， 
可 以 直接 实现 诸如 圆 角 边框 、 图 像 边框 和 多 色 边 框 等 效果 。 这 对 前 端 开发 人 员 来 说 ， 无 疑 
是 一 件 可 喜 的 事情 。 


3.4.1 设计 圆 角 边框 一 一 border-radius 属性 


边框 在 网 页 里 几乎 随处 可 见 ， 同 时 也 显得 边框 非常 重要 。border-radius 属性 为 CSS 3 
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的 新 增 属性 ， 用 来 设计 边框 的 圆 角 ， 相 信和 前 端 开发 人 员 已 经 期 待 很 入 了 吧 。 
1. 参数 说 明 


border-radius 属性 的 语法 如 下 : 


border-radius : none | <length>{1,4} [ / <length>{1,4} ]? 


取 值 说 明 如 下 。 

口 none: 默认 值 ， 表 示 元 素 没有 圆 角 。 

口 <length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 该 值 分 两 组 ， 每 
组 可 以 有 1 到 4 个 值 。 第 一 组 为 水 平 半径 ， 第 二 组 为 垂直 半径 ， 如 果 第 二 组 省 略 ， 
则 默认 等 于 第 一 组 的 值 。 


2. 派生 子 属性 


border-radius 属性 ， 又 针对 边框 的 4 个 角 ， 派 生出 4 个 子 属 性 ， 如 下 所 示 。 

口 border-top-left-radius: 定义 左上 角 的 圆 角 。 

口 border-top-right-radius: 定义 右上 角 的 圆 角 。 

口 border-bottom-left-radius: 定义 左下 角 的 圆 角 。 

口 border-bottom-right-radius: 定义 右 下 角 的 圆 角 。 

如 果 边 框 的 4 个 圆 角 的 半径 各 不 相同 ， 使 用 子 属 性 单独 定义 每 个 圆 角 ， 是 一 个 直接 有 
效 的 方法 。 


3. 圆 角 边 框 示例 


border-radius 属性 本 身 又 包含 4 个 子 属性 ， 当 为 该 属性 赋 一 组 值 的 时 候 ， 将 遵循 CSS 
的 赋值 规则 。 从 border-radius 属性 语法 可 以 看 出 ， 其 值 也 可 以 同时 包含 2 个 值 、3 个 值 或 4 
个 值 ， 多 个 值 的 情况 用 空格 间隔 开 。 

下 面 看 一 个 示例 。 该 示例 中 只 有 一 个 div 元 素 ， 使 用 border-radius 属性 把 边框 美化 成 
圆 角 。 

【示例 3-21】 设计 圆 角 边框 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 边 框 圆 角 属性 border-radius</title> 
<style type="text/css"> 
div { 
width:200px; 
height:80px; 
background-color:# feO0; 
border: 10px solid #f90; /* 宽度 为 10px 的 边框 */ 
border-radius:20px; /* 边框 的 圆 角 半径 为 20px */ 
了 
</style> 
<body> 
<div></div> 
</body> 
</html> 
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10px。 


框 内 部 将 不 再 是 圆 和 月 ， 如 图 3-38 所 示 。 


运行 结果 如 图 3-36 所 示 。 

代码 分 析 : 在 示例 3-21 中 ， 设 置 了 一 个 宽度 
为 10px 的 边框 。 仅 仅 添加 了 border-radius 属性 ， 
并 赋值 为 20px， 就 把 边框 的 4 个 角 变 成 半径 为 
20px 的 圆 角 。 边 框 的 圆 角 参照 图 3-37 所 示 ，20px 
的 圆 角 半径 为 边框 的 外 边 半径 ， 内 边 半径 仅 为 


如 果 边 框 的 宽度 大 于 或 等 于 圆 角 半径 ， 则 边 图 3-36 圆 角 边 杠 


人 


图 3-37 边框 的 宽度 小 于 圆 角 半径 图 3-38 边框 的 宽度 大 于 或 等 于 圆 角 半径 


虽然 border-radius 属性 是 与 边框 有 关 的 属性 ， 但 是 在 不 设置 边框 的 情况 下 ， 如 果 该 块 


元 素 有 背景 ， 则 把 背景 的 4 个 角 定义 为 贺 角 。 去 除 样式 表 中 的 边框 样式 如 下 : 


<style type="text/css"> 
div { 
width:200px; 
height:80px; 
background-color:# feO0; 


border-radius:20px; /* 边框 的 圆 角 半径 为 20px */ 


</style> 


运行 结果 如 图 3-39 所 示 。 


图 3-39 没有 边框 的 圆 角 背景 


遵循 CSS 的 赋值 规则 ，border-radius 属性 可 以 被 赋值 为 2 个 值 的 鲁 


值 表示 左上 和 角 和 右 下 角 的 圆 角 半径 ， 第 二 个 值 表示 右上 角 和 左下 角 的 


园 


整 样式 表 如 下 : 


<style type="text/css"> 
div { 
width:200px; 
height:80px; 


合 参数 ， 则 第 一 个 


角 半 径 。 例 如 ， 调 
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background-color:# feO0; 
/* 宽度 为 10px 的 边框 */ 


border: 10px solid #f£90; 
border-radius:20px 40px; /* 边框 的 圆 角 半径 为 20px */ 


} 
</style> 


运行 结果 如 图 3-40 所 示 。 


图 3-40 2 个 参数 的 赋值 


同样 ， 把 border-radius 属性 赋值 为 3 个 值 的 集合 参数 ， 则 第 一 个 值 表示 左上 角 的 圆 角 
半径 , 第 二 个 值 表示 右上 角 和 左下 角 的 圆 角 半径 , 第 三 个 值 表 示 右 下 角 的 圆 角 半径 。 例如， 
调整 样式 表 如 下 : 

<style type="text/css"> 

div { 

width:200px; 

height:80px; 

background-color:# feO0; 

border: 10px solid #f90; /* 宽度 为 10px 的 边框 */ 
border-radius:20px 40px 30px; /* 边框 的 圆 角 半径 为 20px */ 


</style> 


运行 结果 如 图 3-41 所 示 。 


图 3-41 3 个 参数 的 赋值 


同样 ， 把 border-radius 属性 赋值 为 4 个 值 的 集合 参数 ， 则 第 一 个 值 表示 左上 角 的 圆 角 
半径 ， 第 二 个 值 表 示 右 上 角 的 圆 角 半径 ， 第 三 个 值 表 示 右 下 角 的 圆 角 半径 ， 第 四 个 值 表示 


左下 角 的 圆 角 半径 。 例 如 ， 调 整 样式 表 如 下 : 


<style type="text/css"> 
div { 
width:200px; 
height:80px; 
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background-color:# fe07 


border: 10px solid #f907 /* 宽度 为 10px 的 边框 */ 
border-radius:20px 10px 30px 40px; /* 边框 的 圆 角 半径 为 20px */ 
} 
</style> 


运行 结果 如 图 3-42 所 示 。 


图 3-42 4 个 参数 的 赋值 


当然 也 可 以 使 用 border-radius 属性 的 4 个 子 属性 来 设计 圆 角 边框 。 例 如 ， 我 们 把 
border-radius 属性 赋值 为 4 个 值 的 集合 参数 ， 改 成 子 属性 的 实现 方法 ， 调 整 样式 表 如 下 ; 


<style type="text/css"> 
div { 
width:200px; 
height:80px; 
background-color:# feO0; 


border: 10px solid #f90; /* 宽度 为 10px 的 边框 */ 

border-top-left-radius:20px; /* 左上 角 的 圆 角 半径 为 20px */ 

border-top-right-radius:10px; /* 右上 角 的 圆 角 半径 为 10px */ 

border-bottom-right-radius:30px; /* 右 下 角 的 圆 角 半径 为 30px */ 

border-bottom-left-radius:40px; /* 左下 角 的 圆 角 半径 为 40px */ 
es 


运行 结果 同样 如 图 3-42 所 示 。 
4. 两 组 半径 的 圆 角 


border-radius 属性 还 可 以 为 边框 的 圆 角 同时 指定 两 组 半径 值 : 第 一 组 的 值 表示 圆 角 的 
水 平 半 径 ， 第 二 组 的 值 表 示 圆 角 的 垂直 半径 ， 如 图 3-43 所 示 。 第 一 组 和 第 二 组 的 半径 值 用 
“/” 隔 开 ， 如 border-radius 属性 的 语法 表示 。 


泽 


1 
DDN 


图 3-43 ”水 平 半 径 和 午 直 半 


。66 。 


第 3 章 _ 文本、 背景、 边框 不 再 单调 


a1l 


如 果 半 径 只 有 一 组 ， 则 默认 为 垂直 半径 等 于 水 平 半 径 ， 表 示 这 个 圆 角 是 一 个 1/4 圆 ; 
如 果 圆 角 的 水 平 半径 和 垂直 半径 中 任 一 个 为 0， 则 这 个 角 就 变 成 直角 了 。 下 面 看 一 个 示例 。 
【示例 3-22】 两 组 半径 的 圆 角 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 两 组 半径 的 圆 角 </title> 
<style type="text/css"> 
div { 
width:200px; 
height:80px; 
background-color:#fe0; 
border: 10px solid #f907 /* 宽度 为 10px 的 边框 */ 
border-radius:20px/40px; /* 斜 线 间 隔 的 两 组 半径 */ 
上 
</style> 
<body> 
<div></div> 
</body> 
</html> 


运行 结果 如 图 3-44 所 示 。 


图 3-44 两 组 半径 的 圆 角 


代码 分 析 : 在 示例 3-22 中 ， 添 加 border-radius 属性 ， 并 赋值 为 “20px/40px”， 该 值 
由 和 斜 线 间 隔 ， 代 表 圆 角 的 两 组 半径 〈 即 水 平 半径 和 垂直 半径 ) 。 此 时 边框 的 每 个 圆 角 是 一 
个 L4 的 椭圆 。 
当然 ， 也 可 以 赋 border-radius 属性 值 为 两 组 4 个 值 。 即 第 一 组 的 4 个 值 ， 分 别 表示 左 
上 角 、 右 上 角 、 右 下 角 、 左 下 角 圆 角 的 水 平 半径 ， 第 二 组 的 4 个 值 分 别 表示 左上 角 、 右 上 
角 、 右 下 角 、 左 下 角 圆 角 的 垂直 半径 。 调 整 样式 表 如 下 : 
<style type="text/css"> 
div { 
width:200px; 
height:80px; 
background-color:#feO0; 
border: 10px solid #f907 /* 宽度 为 10px 的 边框 */ 
border-radius: 20px 30px 40px 50px/30px 40px 10px 0; 
/* 斜 线 间 隔 的 两 组 半径 */ 


: 
</style> 
运行 结果 如 图 3-45 所 示 。 
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图 3-45 两 组 半径 的 圆 角 


代码 分 析 : 在 设置 第 二 组 半径 时 ， 将 边框 左下 角 圆 角 的 垂直 半径 设置 为 0， 则 边框 的 
左下 角 为 直角 。 根 据 CSS 的 赋值 规则 ， 也 可 以 给 border-radius 属性 赋值 为 : 两 组 2 个 值 或 
两 组 3 个 值 。 


外 提示 : 值得 一 提 的 是 ，border-radius 属性 所 派生 的 4 个 子 属 性 ， 不 能 使 用 两 组 半径 的 方 
法 赋值 。 期待 着 未 来 能 够 获得 支持 。 


3.4.2 设计 图 像 边框 


border-image 属性 


在 CSS 3 之 前 ， 图 像 不 能 直接 应 用 于 边框 ， 设 计 者 们 通常 把 边框 的 每 个 角 或 每 条 边 单 
独 做 一 张 图 ， 并 转 而 使 用 背景 图 像 的 方式 ， 模 拟 实现 边框 ， 这 与 边框 本 身 的 属性 没有 一 点 
关系 。 针 对 这 种 曲折 繁琐 的 实现 方法 ，CSS3 中 新 增 了 border-image 属性 ， 专 门 用 于 图 像 边 
框 的 处 理 。 它 的 强大 之 处 更 在 于 它 能 灵活 地 分 割 图 像 ， 并 应 用 于 边框 。 


1. 参数 说 明 


border-image 属性 的 语法 如 下 : 
border-image : none | <image> [ <number> | <percentage>]{1,4} [ / 
<border-width>{1,4} ]? [ stretch | repeat | round ]{0,2} 
取 值 说 明 如 下 。 
none: 默认 值 。 表 示 边 框 没有 背景 图 。 
<image>: 使 用 绝对 或 相对 的 url 地 址 指定 图 像 源 。 
<number>: 裁 切 边框 图 像 大 小 ， 属 性 值 没有 单位 ， 默 认 单位 为 像素 。 
<percentage>: 裁 切 边框 图 像 大 小 ， 使 用 百分比 表示 。 
<border-width>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 ， 用 于 设置 
口 stretch、repeat、round: 分 别 表 示 拉 伸 、 重 复 、 平 铺 ， 其 中 默认 值 为 stretch 。 
2. 派生 子 属性 
border-image 属性 是 一 个 复合 属性 。 根 据 边 框 方位 的 不 同 ， 可 派生 如 下 8 个 特定 方位 
的 子 属 性 。 
口 border-top-image: 定义 上 边框 的 图 像 。 
口 border-right-image: 定义 右边 框 的 图 像 。 
口 border-bottom-image: 定义 下 边框 的 图 像 。 
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border-left-image: 定义 左边 框 的 图 像 。 
border-top-left-image: 定义 左上 角 边 框 的 图 像 。 
border-top-right-image: 定义 右上 角 边 框 的 图 像 。 
border-bottom-left-image: 定义 左下 角 边框 的 图 像 。 
border-bottom-right-image: 定义 右 下 角 边 框 的 图 像 。 


根据 边框 图 像 的 处 理 功 能 ，border-image 属性 又 派生 类 以 下 几 个 子 属 性 。 


口 


口 


border-image-source: 定义 边框 的 图 像 源 ， 使 用 绝对 或 相对 的 url 地 址 。 
border-image-slice: 定义 边框 图 像 的 切片 ， 设 置 图 像 的 边界 向 内 的 偏 移 长 度 。 
border-image-repeat: 定义 边框 图 像 的 展现 方式 : 拉 伸 、 重 复 、 平 铺 。 
border-image-width: 定义 图 像 边 框 的 宽度 ,也 可 使 用 border-width 属性 实现 相同 的 
功能 。 

border-image-outset: 定义 边框 图 像 的 偏 移 位 置 。 


3. 图 像 的 切片 


border-image 属性 的 语法 中 的 <number> 或 <percentage> 都 可 用 于 定义 边框 图 像 的 切片 ， 
也 可 以 使 用 子 属性 border-image-slice 来 定义 边框 图 像 的 切片 ， 但 子 属性 border-image-slice 
没有 获得 任何 主流 浏览 器 的 支持 。 

关于 border-image 属性 及 其 子 属性 border-image-slice 定义 的 切片 ， 我 们 基于 如 图 3-46 
所 示 的 边框 素材 ， 说 明 如 下 。 


口 


口 
口 
口 


切片 可 使 用 <number> 或 <percentage> 值 定义 实现 ， 定 义 出 9 个 切片 进行 边框 图 像 
<number> 为 数值 ， 没 有 单位 ， 默 认 单位 为 像素 。 

<percentage> 为 百分比 值 ， 该 百分比 是 相对 于 图 像 而 言 的 。 

只 要 定义 4 个 数值 或 百分比 值 ， 就 会 从 图 像 的 边界 分 别 在 上 、 右 、 下 、 左 4 个 方 
向 内 偏 移 相应 的 长 度 (如 图 3-47 所 示 的 箭头 ) ， 即 可 形成 4 条 直线 (如 图 3-47 所 
示 的 虚线 ) ， 通 过 这 4 条 直线 ， 可 以 确定 9 个 切片 。 

属性 会 在 4 个 方向 上 设置 向 内 偏 移 的 长 度 ， 它 遵循 CSS 方位 规则 ， 按 照 上 、 碳 、 
下 、 左 的 顺 时 针 方 向 逐个 赋值 。 当 然 ， 两 个 值 和 三 个 值 的 ， 都 会 按照 统一 的 方位 
规则 去 解释 。 

在 9 个 切片 中 ，4 个 角 上 的 切片 会 直接 显示 ; 4 个 边 上 的 切片 ， 则 可 以 设置 拉 伸 、 
平 铺 等 显示 方式 ， 中 间 的 切片 ， 会 以 元 素 背景 形式 显示 ， 其 显示 方式 会 与 4 个 边 
上 的 切片 保持 一 致 ， 所 有 的 切片 ， 都 会 根据 边框 的 宽度 与 切片 宽度 的 比例 进行 缩放 。 


证 让 
$+ 


图 3-46 边框 图 像素 材 图 3-47 边框 图 像 切 片 
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4. 图 像 边框 示例 


下 面 通过 示例 来 了 解 图 像 边框 的 设计 方法 ， 并 理解 边框 图 像 的 切片 原理 。 这 里 使 用 图 


3-46 所 示 的 边框 图 像素 材 ， 图 像 尺寸 为 90pxX90px， 图 像 中 的 每 个 
为 30px X30px。 
【示例 3-23】 设计 图 像 边框 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 设 计 图 像 边 框 </title> 
<style type="text/css"> 
div { 
width:200px; 
height:80px; 


a 


圈 的 外 切 矩 形 尺 寸 均 


-webkit-border-image:url(../images/borderimage.png) 30/30px; 

/* 兼容 webkit 内 核 */ 
-moz-border-image:url(../images/borderimage.png) 30/30px; 

/* 兼容 gecko 内 核 */ 
-o-border-image:url(../images/borderimage.png) 30/30px; 

/* 兼容 presto 内 核 */ 
border-image:url(../images/borderimage.png) 30/30px; 

/* 标准 用 法 */ 


} 

</style> 
<body> 
<div></div> 
</body> 
</html> 


运行 结果 如 图 3-48 所 示 。 


> 


拓 -只 


图 3-48 设计 的 图 像 边框 


代码 分 析 : 如 示例 3-23 中 ， 仅 border-image 属性 即 可 实现 图 像 边框 ， 并 根据 不 同 的 浏 
览 器 内 核 给 出 兼容 性 的 用 法 。 该 示例 中 ， 设 置 一 个 内 偏 移 量 值 为 30px， 图 像 会 在 4 个 方向 
均 以 30px 的 内 偏 移 量 把 图 像 分 割 成 9 个 相等 的 切片 ， 各 位 一 个 圆圈 图 形 。 如 图 3-48 所 示 ， 
4 个 角 直 接 显示 相应 的 切片 ， 而 4 个 边 上 的 切片 拉 伸 显示 ， 中 间 的 切片 也 以 背景 的 形式 拉 


伸 显 


示 。 因 为 在 不 设置 显示 方式 的 时 候 ， 默 认 值 为 stretch， 即 拉 伸 显示 。 
遵循 CSS 赋值 的 方位 规则 : 设置 一 个 偏 移 值 (A) 时 ， 表 示 图 像 的 4 个 方位 的 向 内 偏 


移 值 均 为 该 值 (A) ;设置 2 个 偏 移 值 (A、B) 时 ， 图 像 的 上 、 右 、 下 、 左 4 个 方位 的 内 
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偏 移 值 分 别 为 A、B、A、B; 设置 3 个 偏 移 值 (A、B、C) 时 ， 则 图 像 的 上 、 右 、 下 、 左 
4 个 方位 的 内 偏 移 值 分 别 为 A、B、C、B; 设置 4 个 偏 移 值 (A、B、C、D) 时 ， 则 图 像 的 
上 、 右 、 下 、 左 4 个 方位 的 内 偏 移 值 分 别 为 A、B、C、D。 同 样 ， 边 框 的 宽度 也 遵循 这 个 


规则 。 
所 以 ， 示 例 3-23 中 的 样式 表 也 可 以 是 如 下 写法 : 


<style type="text/css"> 
div { 
width:200px; 
height:80px; 
-webkit-border-image:url(../images/borderimage.png) 30 30 30 30/30px; 
/* 兼容 webkit 内 核 */ 
-moz-border-image:url(../images/borderimage.png) 30 30 30 30/30px; 
/* 兼容 gecko 内 核 */ 
-o-border-image:url(../images/borderimage.Png) 30 30 30 30/30px; 
/* 兼容 presto 内 核 */ 


border-image:url(../images/borderimage.png) 30 30 30 30/30px; 


/* 标准 用 法 */ 
} 
</style> 
运行 结果 不 变 , 如 图 3-48 所 示 。 很 显然 , 我 们 可 以 把 每 个 方位 的 内 偏 移 设 为 不 同 的 值 ， 
以 调整 图 像 的 切片 。 


例如 ， 我 们 设置 两 个 不 相等 的 偏 移 值 ， 产 生 不 同 尺寸 的 切片 ， 调 整 样 式 表 如 下 : 


<style type="text/css"> 
div { 
width:200px; 
height:80px; 
-webkit-border-image:url(../images/borderimage.png) 40 30/30px; 
/* 兼容 webkit 内 核 */ 


-moz-border-image:url(../images/borderimage.png) 40 30/30px; 
/* 兼容 gecko 内 核 */ 


-o-border-image:url(../images/borderimage.png) 40 30/30px; 
/* 兼容 presto 内 核 */ 


border-image:url(../images/borderimage.png) 40 30/30px; 
/* 标准 用 法 */ 


} 
</style> 
运行 结果 如 图 3-49 所 示 ， 图 像 的 切片 如 图 3-50 所 示 。 


WH 


Oo 


图 3-49 切片 不 等 的 图 像 边框 图 图 3-50 图 像 的 切片 
当 上 下 两 个 方位 的 内 偏 移 值 之 和 大 于 或 等 于 图 像 高 度 ， 且 左右 两 个 方位 的 内 偏 移 值 之 


| 
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和 也 大 于 或 等 于 图 像 的 宽度 时 ， 则 只 有 4 个 角 能 获得 切片 ， 并 根据 尺寸 缩放 大 小 。 调 整 样 
式 表 如 下 : 


<style type="text/css"> 
div { 
width:200px; 
height:80px; 
-webkit-border-image:url(../images/borderimage.png) 60 70 50 30/30px; 
/* 兼容 webkit 内 核 */ 
-moz-border-image:url(../images/borderimage.png) 60 70 50 30/30px; 
/* 兼容 gecko 内 核 */ 
-0o-border-image:url(../images/borderimage.png) 60 70 50 30/30px; 
/* 兼容 presto 内 核 */ 
border-image:url(../images/borderimage.png) 60 70 50 30/30px; 
/* 标准 用 法 */ 


| 
</style> 


运行 结果 如 图 3-51 所 示 。 


图 3-51 仅 4 个 角 有 切片 图 像 的 边框 


如 果 上 下 两 个 方位 的 内 偏 移 值 都 大 于 或 等 于 图 像 的 高 度 ， 且 左右 两 个 方位 的 内 偏 移 值 
也 都 大 于 或 等 于 图 像 的 宽度 ， 则 4 个 角 能 获得 完整 图 像 的 切片 。 调 整 样式 表 如 下 : 
<style type="text/css"> 
div { 

width:200px; 

height:80px; 

-webkit-border-image:url(../images/borderimage.png) 90 100 120 130/ 

30px; /* 兼容 webkit 内 核 */ 

-moz-border-image:url(../images/borderimage.png) 90 100 120 130/30px; 
/* 兼容 gecko 内 核 */ 
90 100 120 130/30px; 
/* 兼容 presto 内 核 */ 
90 100 120 130/30px; 

/* 标准 用 法 */ 


-0o-border-image:url(../images/borderimage .png) 
border-image:url(../images/borderimage.png) 


| 
</style> 


则 运行 结果 如 图 3-52 所 示 。 

5. 图 像 切片 显示 方式 

边框 图 像 切片 的 显示 方式 对 应 的 子 属性 为 border-image-repeat， 包 含 三 个 值 : stretch、 
repeat、round， 分 别 表 示 拉 伸 、 重 复 、 平 铺 ， 其 中 默认 值 为 stretch。 
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图 3-52 整个 图 像 作为 切片 的 边框 


【示例 3-24】 边框 图 像 重 复 显示 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 图 像 显 示 方 式 </title> 
<style type="text/css"> 
div { 
width:200px; 
height:80px; 
-webkit-border-image:url(../images/borderimage.png) 30/30px repeat; 
/* 兼容 webkit 内 核 */ 
-moz-border-image:url(../images/borderimage .png) 30/30px repeat; 
/* 兼容 gecko 内 核 */ 
-o-border-image:url(../images/borderimage.png) 30/30px repeat; 
/* 兼容 presto 内 核 */ 
border-image:url(../images/borderimage.png) 30/30px repeat; 
/* 标准 用 法 */ 


} 

</style> 
<body> 
<div></div> 
</body> 
</html> 


运行 结果 如 图 3-53 所 示 。 


图 3-53 图 像 显 示 方式 repeat 


代码 分 析 : 在 示例 3-24 中 ， 指 定 了 边框 图 像 的 显示 方式 为 重复 (repeat) ， 则 4 个 边 
框 的 图 像 重 复 显示 ， 且 重复 过 程 中 会 保持 所 属 切片 的 长 宽 比 例 不 变 。 如 图 3-53 所 示 ， 切 片 
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是 从 边框 的 中 间 开 始 向 周围 重复 平 铺 的 ， 在 边缘 区 域 ， 可 能 会 被 部 分 隐藏 ， 不 能 显示 完整 
的 切片 。 
属性 值 round 也 是 把 切片 重复 地 平 铺 ， 与 属性 值 repeat 不 同 的 是 ,在 切片 平 铺 过 程 中 ， 
会 根据 边框 的 尺寸 调整 切片 的 长 宽 比例 ， 以 保证 在 边缘 区 域 也 能 显示 完整 的 切片 。 调 整 示 
例 3-24 的 样式 表 如 下 : 
<style type="text/css"> 
div { 
width:200px; 
height:80px; 
-webkit-border-image:url(../images/borderimage.png) 30/30px round; 
/* 兼容 webkit 内 核 */ 
-moz-border-image:url(../images/borderimage.png) 30/30px round; 
/* 兼容 gecko 内 核 */ 
-o-border-image:url(. ./images/borderimage.Png) 30/30px round; 
/* 兼容 presto 内 核 */ 


border-image:url(../images/borderimage.png) 30/30px round; 
/* 标准 用 法 */ 


} 
</style> 


运行 结果 如 图 3-54 所 示 。 


图 3-54 图 像 显示 方式 round 


也 可 以 定义 显示 方式 为 两 个 值 : 第 一 个 值 用 于 指定 上 、 下 两 个 边框 的 切片 显示 方式 ， 
第 二 个 值 用 于 指定 左 、 右 两 个 边框 的 切片 显示 方式 。 调 整 样式 表 如 下 : 


<style type="text/css"> 
div { 
width:200px; 
height:80px; 
-webkit-border-image:url(../images/borderimage.png) 30/30px round 
stretch; /* 兼容 webkit 内 核 */ 
-moz-border-image:url(../images/borderimage .png) 30/30px 
stretch; /* 兼容 gecko 内 核 */ 
-0o-border-image:url(../images/borderimage.png) 30/30px round stretch; 
/* 兼容 presto 内 核 */ 
30/30px round stretch; 


/* 标准 用 法 */ 


round 


border-image:url(../images/borderimage.png) 


} 
</style> 


运行 结果 如 图 3-55 所 示 。 
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久生 久生 届 信 全 


本 示 本 本 本 本本 生 


图 3-55 图 像 显示 方式 round+stretch 


全 提示 : 关于 图 像 切 片 的 显示 方式 ， 浏 览 器 允许 定义 一 个 值 或 两 个 值 ， 并 且 可 以 遵循 CSS 


赋值 的 方位 规则 来 解析 。 但 是 ， 不 允许 同时 定义 3 个 值 或 4 个 值 。 


6. 图 像 边框 的 宽度 


边框 的 宽度 可 以 在 border-image 属性 中 设置 ， 也 可 以 使 用 border-width 属性 来 指定 宽 
图 像 的 切片 会 根据 边框 的 尺寸 自动 缩放 切片 。 
【示例 3-25】 边框 的 宽度 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 图 像 边框 的 宽度 </title> 
<style type="text/css"> 
div { 
width:200px; 
height:80px; 
-webkit-border-image:url(../images/borderimage.png) 30/l0px round; 
/* 兼容 webkit 内 核 */ 
-moz-border-image:url(../images/borderimage.png) 30/10px round; 
/* 兼容 gecko 内 核 */ 
-o-border-image:url(../images/borderimage.png) 30/10px round; 
/* 兼容 Presto 内 核 */ 
border-image:url(../images/borderimage.png) 30/10px round; 
/* 标准 用 法 */ 
| 
</style> 
<body> 
<div></div> 
</body> 
</html> 


运行 结果 如 图 3-56 所 示 。 
代码 分 析 : 在 示例 3-25 中 ， 设 置 了 一 个 值 为 10px 的 边框 宽度 ， 即 同时 定义 了 4 个 边 


框 的 宽度 。 如 图 3-56 所 示 ， 图 像 的 切片 缩小 了 很 多 。 图 像 边框 的 宽度 设置 ， 也 遵循 CSS 
赋值 的 方位 规则 ， 可 以 为 不 同 的 边 定义 不 同 的 宽度 。 调 整 样式 表 如 下 : 
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信 全 证 十 个 全 十 十 十 介 
分 全 十 十 全 合十 十 十 全 
仿 十 十 全 个 个 十 十 十 全 
全 全 全 全 个 们 个 们 全 全 


加 
2 
+* 
四 
四 
四 
be 


图 3-56 图 像 边框 宽度 为 10px 


<style type="text/css"> 
div { 
width:200px; 
height:80px; 
-webkit-border-image:url(../images/borderimage.png) 30/30px 20px 
round; /* 兼容 webkit 内 核 */ 
-moz-border-image:url(../images/borderimage.png) 30/30px 20px round; 
/* 兼容 gecko 内 核 */ 
-o-border-image:url(../images/borderimage.png) 30/30px 20px round; 
/* 兼容 presto 内核 */ 
border-image:url(../images/borderimage.png) 30/30px 20px round; 
/* 标准 用 法 */ 


有 
</style> 


运行 结果 如 图 3-57 所 示 。 


妇 
3 
Da 
De 
EE 
全 


BAAAAAS 
6 


信人 久久 生生 
全 全 会 会 全 
人 
全 全 人 人 人 
售 售 售 合 合 
伞 合 合 倍 全 


图 3-57 图 像 显示 方式 round+stretch 


全 提示 : 本 节 的 示例 图 全 部 是 火狐 浏览 器 中 的 显示 效果 。 不 同 内 核 的 浏览 器 ， 解 析 
border-image 属性 有 所 区 别 ， 但 是 火狐 浏览 器 的 支持 效果 更 贴近 CSS 3 规范 。 


3.4.3 设计 多 色 边 框 一 一 border-color 属性 


border-color 属性 用 于 设置 边框 的 颜色 ,在 之 前 的 CSS 规范 中 已 经 定义 了 。 不 过 ，CSS 
3 增强 了 该 属性 的 功能 ， 可 以 用 它 为 边框 设置 更 多 的 颜色 ， 可 以 直接 设计 出 丰富 的 边框 效果 。 


1. 参数 说 明 
border-color 属性 的 语法 如 下 : 
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border-color : [ <color> | transparent ] {1,4} 


取 值 说 明 如 下 。 

口 <color>: 是 一 个 颜色 值 ， 可 以 是 半 透 明 颜 色 。 

口 transparent: 透明 值 。 不 设置 边框 颜色 时 ， 默 认为 该 值 。 

口 border-color 属性 , 遵循 CSS 赋值 的 方位 规则 , 可 以 分 别 为 元 素 的 4 个 边框 设置 颜色 。 


2. 派生 子 属性 


border-color 属性 本 身 可 定义 1 一 4 种 颜色 ， 用 于 设置 各 个 边框 的 颜色 ， 但 无 法 同时 为 
边框 指定 多 种 颜色 ， 因 为 这 会 导致 歧义 。border-color 属性 派生 4 个 子 属性 ， 分 别 用 于 4 个 
边框 颜色 的 设置 ， 如 下 。 

口 border-top-color: 定义 元 素 顶 部 边框 的 颜色 。 

口 border-right-color: 定义 元 素 右 侧 边框 的 颜色 。 

口 border-bottom-color: 定义 元 素 底 部 边框 的 颜色 。 

口 border-left-color 定义 元 素 左 侧 边框 的 颜色 。 

这 4 个 子 属性 分 别 为 各 个 边框 指定 颜色 ， 可 以 指定 多 种 颜色 。 只 是 指定 多 种 颜色 的 功 
能 ， 仅 火狐 浏览 器 有 私有 属性 支持 。 


3. 多 色 边 框 示例 


为 边框 指定 多 种 颜色 ， 需 要 使 用 border-color 属性 的 子 属性 来 定义 。border-color 属性 
本 身 不 能 为 一 个 边框 定义 多 种 颜色 ， 因 为 会 带 来 歧义 。 
【示例 3-26】 为 边框 定义 多 种 颜色 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 为 边框 定义 多 种 颜色 </title> 

<style type="text/css"> 

div { 
height:160px; 
border:20px solid #999; 
/* 兼容 gecko 内 核 的 浏览 器 如 火狐 */ 
-moz-border-top-colors:#f10 #f£20 #f£30 #f40 #f£50 #f£60 #f£70 #£80 #f£90 #fa0; 
-moz-border-right-colors:#f10 #f20 #f£30 #f40 #f£50 #f£60 #f£70 #f£80 #f£90 
#fa0; 
-moz-border-bottom-colors:#f10 #f£20 #f30 #f£40 #f£50 #f£60 #f70 #f£80 #f£90 
#fa0; 
-moz-border-left-colors:#f10 #f£20 #f30 #f£40 #f50 #f£60 #f£70 #f£f80 #f£90 
#fa0; 
/* 标准 用 法 */ 
border-top-colors:#f10 #f20 #f£30 #f40 #f£50 #f£60 #f£70 #f£f80 #f£90 #fa0; 
border-right-colors:#f10 #f20 #f30 #f£40 #f£50 #£60 #f£70 #f£80 #f£90 #fa0; 
border-bottom-colors:#f10 #f20 #f£30 #f£40 #f£50 #f£60 #f£70 #f£80 #£90 #fa0; 
border-left-colors:#f£10 #f£f20 #f£30 #f£40 #f£50 #f£60 #f£70 #f£80 #f£90 #fa0; 


</style> 
<body> 
<div></div> 
</body> 
</html> 
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运行 结果 如 图 3-58 所 示 。 


图 3-58 多 色 边 框 在 Firefox 中 的 显示 效果 


代码 分 析 : 在 示例 3-26 中 ， 为 每 个 边框 分 别 定义 了 10 种 颜色 。 如 图 3-58 所 示 ， 颜 色 
从 外 到 内 显示 ， 每 种 颜色 只 占有 1 像素 的 宽度 。 本 示例 中 ,边框 宽度 为 20px，10 种 颜色 中 
的 最 后 一 种 颜色 ， 将 被 用 于 剩 下 的 宽度 。 


3.4.4 实验 室 : 使 用 新 技术 设计 网 页 


CSS 3 的 圆 角 与 图 像 边 框 有 着 强大 的 功能 ， 灵 活 使 用 贺 角 和 边框 属性 ， 可 以 设计 出 各 
种 各 样 的 页 面 效 果 。 本 节 介 绍 一 个 使 用 新 技术 设计 的 网 页 案例 ， 该 案例 综合 运用 了 
border-radius 属性 、border-image 属性 和 border-color 属性 。 

1. 案例 简介 

本 节 所 介绍 的 案例 ， 是 一 个 简易 网 页 ， 包 括 导航 部 分 、 搜 索 部 分 、 图 片 切换 预览 部 分 
和 功能 按钮 部 分 。 其 中 会 涉及 大 量 的 圆 角 和 图 像 修饰 的 边框。 整个 案例 ， 将 会 使 用 两 个 图 


片 素材 , 用 于 设计 图 像 边框 , 如 图 3-59 所 示 。 其 中 也 用 到 了 渐变 属性 , 省 了 不 少 背景 图 片 ， 
渐变 属性 将 在 后 面 章 节 里 讲解 。 


3-59 图像 边框 素材 


整个 案例 演示 效果 如 图 3-60 所 示 。 
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图 3-60 ”使 用 新 技术 设计 的 网 页 
2. 设计 网 页 元 素 


设计 网 页 元 素 结构 ， 包 含 导航 、 搜 索 、 图 片 预览 、 功 能 按钮 等 部 分 。 
【示例 3-27】 使 用 新 技术 设计 的 网 页 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 使 用 新 技术 设计 的 网 页 </title> 
</head> 
<body> 
<!-- 显 示 区 域 --> 
<div id="area"> 
<!-- 导 航 部 分 --> 
<ul id="nav"> 
<1li class="cur"> 风 景 </1i> 
<1i> 人 物 </1i> 
<1i> 素 材 </1i> 
</ul> 
<!-- 搜 索 部 分 --> 
<div id="search"> 
<input type="text" name="key" value="" /> 
<input type="submit" value="GO" /> 
</div> 
<!-- 图 片 切换 预览 部 分 --> 
<div id="box"> 
<table width="100%" border="0" align="center" cellpadding="0" 
cellspacing="0"> 
<tr> 
<td><div class="prev"><a href="#">3</a></div></td> 
<td class="pics"><img src="../images/Iceland.jpg" /></td> 
<td><div class="next"><a href="#">4</a></div></td> 
</tr> 
</table> 
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</div> 
<! 一 -功能 按钮 部 分 --> 
<div id="but"><a class="first" href="#"> 分 享 </a><a href="#"> 转 发 </a><a 
class="last"” href="#"> 收 藏 </a> 
<span class="more"> 列 表 模式 </span></div> 
</div> 
</body> 
</html> 


下 面 ， 我 们 一 步 一 步 地 给 各 个 功能 块 添加 样式 表 ， 并 添加 到 示例 3-27 中 。 
3. 设计 显示 区 域 的 边框 
使 用 预先 准备 的 图 片 素材 ， 设 计 一 个 图 像 边 框 的 样式 表 。 


<style type="text/css"> 
#area { 
width:480px; /* 设置 宽度 */ 
padding:10px; 
margin:0 auto;  /* 元 素 本 身 居中 */ 
-webkit-border-image:url(../images/borderimage2.png) 15/15px; 
/* 兼容 webkit 内 核 */ 
-moz-border-image:url(../images/borderimage2.png) 15/15px; 
/* 兼容 gecko 内 核 */ 
-0o-border-image:url(../images/borderimage2.png) 15/15px; 
/* 兼容 presto 内 核 */ 
border-image:url(../images/borderimage2.png) 15/15px; 
/* 标准 用 法 */ 
上 
</style> 


4. 设计 导航 部 分 
导航 部 分 使 用 的 是 列表 元 素 ， 设 计 成 横向 排列 显示 ， 鼠 标 经 过 时 ， 背 景 变 成 红色 ， 内 
容 文字 变 为 白色 。 


<style type="text/css"> 


#nav { 

list-style:none; /* 不 使 用 列表 样式 */ 

margin:0; /* 设置 外 边 距 */ 

padding:0 60px; /* 设置 内 边 距 */ 

font-size:12px; 

height:20px; /* 高 度 控制 */ 

margin-bottom:-2px; /* 实际 内 容 下 沉 2 像素 ， 紧 贴 下 面 的 搜索 框 */ 
人 下 正二 

height:20px; /* 高 度 控制 */ 

line-height:20px; /* 行 高 控制 */ 


padding:0 10px; 
margin-left:2px; 
float:left; /* 元 素 向 左 浮动 ， 列 表 变 成 横向 排列 显示 */ 
cursor:pointer; /* 手 型 指针 */ 
了 


#nav .cur, #nav li:hover { 
background-color:#ff3333; ”/* 鼠标 经 过 ， 背 景 变 为 红色 */ 
border-radius:3px 3px 0 0; /* 左上 角 和 右上 角 设 计 为 小 圆 角 */ 
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Color:#FFF; /* 鼠标 经 过 ， 文 字 变 为 白色 */ 


} 
</style> 


5. 设计 搜索 部 分 


搜索 部 分 使 用 的 是 文本 框 和 提交 按钮 , 把 它们 都 设计 成 部 分 角 是 贺 


<style type="text/css"> 

#search { 
text-align:center; 

#search input { 
border:1lpx solid #ff3333; 

. 

#search input[type=text] { 
border-radius:10px 0 0 10px; 
border-right-width:0; 
padding-left:10px; 
width:380px; 

} 

#search input[type=submit] { 
border-radius:0 10px 10px 0; 
margin-left:-10px; 


了 
3 
J 


并 紧 贴 在 一 起 。 


/* 均 使 用 红色 边框 */ 


/* 设置 文本 框 样式 */ 

/* 左上 角 和 左下 角 使 用 圆 角 , 圆 角 半径 为 10px */ 
/* 右边 框 宽度 重新 设置 为 0 */ 

/* 左 内 边 距 10px */ 

/* 超 长 宽度 */ 


/* 设置 提交 按钮 样式 */ 
/* 右上 角 和 右 下 角 使 用 圆 角 , 圆 角 半径 为 10px */ 


/* 消除 与 文本 框 的 距离 ， 视 觉 上 与 文本 框 衔接 在 一 起 */ 
background-image: -moz-linear-gradient (top, #ffffcc, #ffcc99); 


/* 渐 变 */ 


background-image: -webkit-gradient(linear, left top, left bottom, 


from(#ffffcc), to(#ffcc99)); 


| 
</style> 


6. 设计 图 片 预览 部 分 


/* 渐变 */ 


图 片 预览 部 分 包括 图 片 预览 和 切换 图 片 按钮 : 上 一 张 图 和 下 一 张 图 。 把 图 片 设 计 成 四 


个 角 是 贺 角 ， 其 后 按钮 设计 成 部 分 圆 角 。 


<style type="text/css"> 

#box { 
padding-top:10px; 

#box .pics { 
text-align:center; 

| 

#box .pics img { 
width:400px; 
-webkit-border-radius:0 20px; 
-moz-border-radius:0 20px; 
-0o-border-radius:0 20px; 
border-radius:10px; 

| 

#box .prev, #box .next { 
width:25px; 
height:25px; 
float:left; 
line-height:25px; 


/* 固定 图 像 宽度 */ 
/* 设计 圆 角 图 片 */ 


/* 设计 圆 角 图 片 */ 
/* 设计 圆 角 图 片 */ 
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} 


text-align:center; 


vertical-align:middle; /* 垂直 方向 居中 */ 
background-color:#f007 /* 背景 颜色 为 红色 */ 
font-family:webdings; /* 图 形 字体 */ 


#box .prev:hover, #box .next:hover { 


} 


/* 鼠标 经 过 ， 切 换 按钮 的 背景 变 成 渐变 背景 */ 

background-image: -moz-linear-gradient(top, #ff3300, #663333); 
background-image: -webkit-gradient(linear, left top, left bottom, 
from(#ff£f3300), to(#663333)); 


#box .prev { 


} 


上 


border-radius:45px 0 0 45px; /* 左边 切换 按钮 的 圆 角 */ 
#box .next { 

border-radius:0 45px 45px 0; /* 右边 切换 按钮 的 圆 角 */ 
#box .prev a, #box .next a { 

display:block; 

Color:#FFF; 


} 


text-decoration:none; 


</style> 
7. 设计 功能 按钮 部 分 
功能 按钮 部 分 包括 三 个 链接 按钮 和 一 个 模式 切换 按钮 。 把 三 个 链接 按钮 连 在 一 起 的 形 


状 设 计 成 圆 角 ;模式 切换 按钮 ， 用 预先 准备 好 的 图 片 ， 设 计 成 图 片 边框。 


<style type="text/css"> 


#but { 
height:20px; 
font-size:12px; 
padding:0 40px; /* 调整 内 边 距 */ 
1 
#but a { 
display:block; /* 盒 模型 结构 显示 */ 
float:left; /* 向 左 浮动 */ 
background-image: -moz-linear-gradient (top, #ffffcc, #ffcc99); 


} 


/* 渐变 */ 
background-image: -webkit-gradient(linear, left top, left bottom, 
from(#ffffcc), to(#ffcc99));  /* 渐变 */ 
padding:0 10px; 
height:20px; 
line-height:20px; 
text-align:center; 
color:#333; 
text-decoration:none; 


border-style:solid; /* 边框 样式 */ 
border-color:#f£90; /* 边框 颜色 */ 
border-width:1px 0; /* 只 有 上 下 两 个 边 有 边框 */ 


#but ~£irst { 


border-radius:10px 0 0 10px; /* 第 一 个 链接 按钮 ， 左 上 角 和 左下 角 设 置 为 圆 角 */ 
border-width:1px; /* 4 个 边 有 边框 */ 


#but .last { 
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border-radius:0 10px 10px 0; /* 第 三 个 链接 按钮 ， 右 上 角 和 右 下 角 设 置 为 圆 角 */ 
border-width:1px; /* 4 个 边 有 边框 */ 


#but a:hover { 

/* 鼠标 经 过 ， 切 换 链接 按钮 的 背景 变 成 渐变 */ 
background-image: -moz-1linear-gradient(top，#ff3300，#663333) : 
background-image: -webkit-gradient(linear, left top, left bottom, 
from (#ff3300) ,to (#663333) ); 
Color:#FFF; 

: 

#but .more { 
float:right; /* 向 右 浮动 */ 

/* 设置 图 像 边框 */ 
-webkit-border-image:url(../images/button.png) 10/5px; 

/* 兼容 webkit 内 核 */ 
-moz-border-image:url(../images/button.png) 10/5px; 

/* 兼容 gecko 内 核 */ 
-o-border-image:url(../images/button.png) 10/5px; 

/* 兼容 presto 内 核 */ 
border-image:url(../images/button.png) 10/5px; /* 标准 用 法 */ 
padding:0 10px; 

Color:#FFF; 
cursor:pointer; 
} 
</style> 


3.5 小 结 


本 章 集 中 讲解 了 最 常用 、 最 基础 的 新 增 样式 表 属 性 。 重 点 讲解 了 文本 阴影 、 色 彩 模 式 、 背 
景 和 边框 4 个 方面 的 内 容 。 其 中 新 增 的 3 个 背景 属性 不 容易 理解 ， 需 要 多 练习 、 多 琢 麻 ， 为 圆 
角 设 置 两 组 半径 ， 可 能 不 易 理解 ， 图 像 边 框 所 包括 的 众多 子 属性 ， 也 比较 复杂 ， 是 个 难点 。 

本 节 所 涉及 的 内 容 虽 然 是 基础 ， 但 是 真正 做 到 灵活 运用 还 是 需要 下 一 番 功 夫 的 。 下 
章 将 介绍 CSS 3 特有 的 新 型 弹性 盒 模型 。 


3.6 习 题 


【习题 1】 举 例 说 明 一 下 文本 的 描 边 效果 和 发 光 效 果 是 如 何 实 现 的 。 
【习题 2】 请 选择 可 用 于 页 面 设计 的 合法 的 颜色 值 ( 多 选 〉: 


A. #00 B. hsl(0, 0%, 90%) C. hsla(40, 50%, 50%, 0.8) 
D. rgba(255, 153,0,0.1) E. rgb(255, 153,0) F. hsb(0, 80%, 90%) 
【习题 3】 请 选择 CSS 3 中 新 增 的 与 背景 有 关 的 属性 〈 多 选 ) : 

A. background-image B. background-origin C. background-clip 

D. background-repeat E. background-size F. background-position 
【习题 4】 请 选择 用 于 设置 圆 角 的 属性 〈 单 选 ): 

A. border-collapse B. border-spacing C. border-style 

D. border-radius E. border-image 
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在 CSS 2.0 的 时 代 ， 页 面 布局 比较 流行 DIV+CSS， 但 其 中 的 浮动 布局 有 很 多 不 便 和 缺 
陷 。 盒 子 元 素 的 阴影 效果 还 要 借助 图 片 来 实现 ; 界面 美化 方面 也 略 显 复杂 。 对 于 这 些 问 题 ， 
在 传统 的 设计 中 ， 没 有 那么 直接 的 实现 ， 要 绕 一 些 弯 子 。 而 在 CSS 3 中 ， 这 些 问 题 将 变 得 
简单 而 直接 。 弹 性 布局 直接 解决 页 面 布局 的 问题 ;盒子 阴影 有 专门 的 属性 处 理 ， 友 好 的 界 
面 设 计 也 少 走 了 很 多 弯路 。 本 章 将 针对 CSS 3 新 增 的 属性 内 容 进行 详细 讲解 。 


4.1 灵活 的 盒 布 局 


为 了 解决 传统 布局 中 的 不 足 ，CSS 3 新 增 了 新 型 的 盒 布 局 。 使 用 盒 布 局 ， 可 以 实现 盒 
元 素 内 部 的 多 种 布局 ， 包 括 排列 方向 、 排 列 顺序 、 空 间 分 配 和 对 齐 方式 等 ， 大 大 增强 了 布 
局 的 灵活 性 。 这 一 革命 性 的 改进 ， 大 大 提高 了 前 端 设 计 师 的 工作 效率 和 工作 水 平 ， 下 面 逐 
步 学 习 盒 布 局 。 


4.1.1 开启 盒 布局 


盒 布 局 是 CSS 3 发 展 的 新 型 布局 方式 , 它 比 传统 的 浮动 布局 方式 更 加 完善 、 更 加 灵活 ， 
而 使 用 方法 却 极 为 简单 。 
开局 盒 布局 的 方法 ， 就 是 把 display 属性 值 设置 为 box 或 inline-box。 目 前 没有 浏览 器 
支持 box 属性 值 ， 为 了 能 兼容 webkit 内 核 和 gecko 内 核 的 浏览 器 ， 可 分 别 使 用 -webkit-box 
和 -moz-box 属性 。 开 启 盒 布 局 后 ， 文 档 就 会 按照 盒 布局 默认 的 方式 来 布局 子 元 素 。 
接 下 来 看 一 个 简单 的 网 页 ， 从 左 至 右 排列 三 个 栏目 : 菜单 栏 、 内 容 栏 和 工具 栏 。 传 统 
的 实现 方式 会 使 用 浮动 布局 方式 ， 现 在 我 们 用 盒 布 局 的 方式 来 实现 三 个 栏目 的 横向 排列 。 
【示例 4-1】 一 个 简单 的 三 栏 网 页 。 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 一 个 简单 的 三 栏 网 页 </title> 
<style type="text/css"> 
.container { 
/* 开启 盒 布 局 */ 
display:-webkit-box; /* 兼容 webkit 内 核 */ 
display:-moz-box; /* 兼容 gecko 内核 */ 
display:box; /* 定义 为 盒子 显示 */ 
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.container div { 
Color:#FFF; 
font-size:12px; 
padding:10px; 
line-height:20px; 

|; 

.container div ul { 
margin:0; 
padding-left:20px; 

| 

.container .left-aside { 


background-color:#F63; /* 左 侧 菜单 栏 背 景 颜色 */ 
. 
.container .center-content { 
background-color:#390; /* 中 间 内 容 栏 背 景 颜 色 */ 
width:200px; 
} 
.container .right-aside { 
background-color:#039; /* 右 侧 工具 栏 背景 颜色 */ 
} 
</style> 
<body> 
<div class="container"> 
<div class="left-aside"> 
<h2> 菜 单 </h2> 
<ul> 
<1i>HTML5</1i> 
<liSCSS 3</1i> 
<1i> 活 动 沙 龙 </1i> 
<1i> 研 发 小 组 </1i> 
</ul> 
</div> 
<div class="center-content"> 
<h2> 内 容 </h2> 
<p> 盒 布局 是 CSS 3 发 展 的 新 型 布局 方式 ， 它 比 传统 的 浮动 布局 方式 更 加 完善 、 更 加 灵活 ， 而 
使 用 方法 却 极为 简单 。</p> 
<p> 开 启 盒 布 局 方法 ， 就 是 设置 display 属性 值 为 box (或 inline-box) 。</p> 
</div> 
<div class="right-aside"> 
<h2> 工 具 </h2> 
<ul> 
<1i> 天 气 预报 </1i> 
<1i> 货 币 汇率 </1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


运行 结果 如 图 4-1 所 示 。 

代码 分 析 : 在 示例 4-1 中 ， 设 置 了 container 类 的 属性 “display:box:”， 并 针对 webkit 
内 核 和 gecko 内 核 设置 了 各 自 的 私有 属性 值 。 接 下 来 ， 被 赋予 container 类 的 元 素 的 内 部 元 
素 ， 将 改变 原 有 的 文档 流动 方式 ， 使 用 盒 布局 默认 的 文档 流动 方式 ， 如 图 4-1 所 示 。 

盒 布 局 包含 多 方面 的 内 容 ， 开 启 盒 布 局 只 是 盒 布 局 的 第 一 步 。 
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4.1. 


图 4-1 一 个 简单 的 三 栏 网 页 


2 元 素 的 布局 方向 box-orient 属性 


CSS 3 新 增 的 box-orient 属性 ， 可 用 于 定义 盒 元 素 的 内 部 布局 方向 。 基 于 webkit 内 核 


的 奉 代 私有 属性 是 -webkit-box-orient， 基 于 gecko 内 核 的 奉 代 私有 属性 是 -moz-box-orient。 


1. 参数 说 明 
box-orient 属性 的 语法 如 下 : 


box-orient : horizontal | vertical | inline-axis | block-axis | inherit 


取 值 说 明 如 下 。 

horizontal: 表示 盒子 元 素 在 一 条 水 平 线 上 从 左 到 右 编排 它 的 子 元 素 。 

vertical: 表示 盒子 元 素 在 一 条 垂直 线 上 从 上 到 下 编排 它 的 子 元 素 。 

inline-axis: 默认 值 ， 表 示 盒 子 元 素 沿 着 内 联 轴 编 排 它 的 子 元 素 ， 表 现 为 横向 编排 。 
block-axis: 表示 元 素 沿 着 块 轴 编 排 它 的 子 元 素 ， 表 现 为 垂直 编排 。 

inherit， 表 示 继 承 父 元 素 中 box-orient 属性 的 值 。 


示例 介绍 


基于 示例 4-1， 在 盒 布 局 的 方式 下 ， 改 变 三 个 栏目 的 布局 方向 为 竖 向 显示 。 改 变样 式 
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表 如 下 。 


【示例 4-2】 竖 向 显示 三 个 栏目 。 


<style type="text/css"> 
.container { 


display:-webkit-box; /* 兼容 webkit 内 核 */ 
display:-moz-box; /* 兼容 gecko 内 核 */ 
display:box; /* 定义 为 盒子 显示 */ 

/* 布局 方向 设置 为 竖 直 方向 */ 

-webkit-box-orient:vertical; /* 兼容 webkit 内 核 */ 
-moz-box-orient:vertical; /* 兼容 gecko 内 核 */ 
box-orient:vertical; /* 定义 为 竖 向 编排 显示 */ 
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-Container div { 
Color:#FFF; 
font-size:12px; 
padding:10px; 
line-height:20px; 

} 

.container div ul { 
margin:0; 
padding-left:20px; 

} 

.container .left-aside { 
background-color:#F63; 

} 

.container .center-content { /* 去 除了 宽度 设置 */ 
background-color:#390; 


-Container .right-aside { 
background-color:#039; 


’ 
</style> 


运行 结果 如 图 4-2 所 示 。 


©—1 m= 


图 4-2 竖 向 显示 三 个 栏目 
代码 分 析 : 示例 4-2 中 ， 把 box-orient 属性 值 设 置 为 vertical， 表 示 垂 直方 向 布局 ， 并 
设置 了 兼容 样式 。 为 了 显示 整齐 ， 同 时 也 取消 了 内 容 栏 目的 宽度 设置 。 由 于 是 盒 布 局 的 方 
式 ， 三 个 栏目 将 竖 向 显示 ， 如 图 4-2 所 示 。 


4.1.3 元素 的 布局 顺序 一 一 box-direction 属性 


在 盒 布 局 下 ， 可 以 设置 盒 元 素 内 部 的 顺序 为 正 向 或 者 反 向 。CSS 3 新 增 的 box-direction 
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属性 ， 可 用 于 定义 盒 元 素 的 内 部 布局 顺序 。 基 于 webkit 内 核 的 奉 代 私有 属性 是 
-webkit-box-direction， 基 于 gecko 内 核 的 替代 私有 属性 是 -moz-box-direction。 


1. 参数 说 明 
box- direction 属性 的 语法 如 下 : 


box-direction : normal | reverse | inherit; 


取 值 说 明 如 下 。 

口 normal: 默认 值 , 正常 顺序 。 垂直 布局 的 盒 元 素 中 , 内 部 子 元 素 从 左 到 右 排列 显 
水 平 布局 的 盒 元 素 中 ， 内 部 子 元 素 从 上 到 下 排列 显示 。 

口 reverse: 反 向 。 表 示 盒 元 素 内 部 的 子 元 素 的 排列 显示 顺序 与 normal 相反 。 
口 inherit， 表 示 继 承 父 元 素 中 box-direction 属性 的 值 。 


2. 示例 介绍 


基于 示例 4-1， 在 盒 布 局 的 方式 下 ， 把 三 个 栏目 改 为 水 平方 向 上 的 反 向 布局 。 调 整 样 
式 表 如 下 。 
【示例 4-3】 反 向 显示 三 个 栏目 。 


<style type="text/css"> 
.container { 
display:-webkit-box; 
display:-moz-box; 
display:box; 
-Webkit-box-orient:horizontal7 
-moz-box-orient:horizontal; 
box-orient:horizontal; 


/* 布局 顺序 属性 设置 为 反 向 */ 


-webkit-box-direction:reverse; /* 兼容 webkit 内 核 */ 
-moz-box-direction:reverse; /* 兼容 gecko 内 核 */ 
box-direction:reverse; /* 定义 为 反 向 顺序 */ 


} 

.container div { 
Color:#FFF; 
font-size:12px; 
padding:10px; 
line-height:20px; 

} 

.container div ul { 
margin:0; 
padding-left:20px; 

} 

.container .left-aside { 
background-color:#F63; 

.container .center-content { 
background-color:#390; 
width:200px; 

) 

.container .right-aside { 
background-color:#039; 

</style> 
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结果 如 图 4-3 所 示 。 


网 


辐 所 向 显示 = 个 栏 上 
人 © | Oyrr740:8080/hc/Chapterd/Code4-3. hta 


图 4-3 反 向 显示 三 个 栏目 


代码 分 析 : 示例 4-3 中 ， 把 box- direction 属性 值 设 置 为 reverse， 表 示 反 向 布局 顺序 ， 
并 设置 了 兼容 样式 。 同 时 也 设置 了 box-orient 属性 值 为 horizontal， 表 示 水 平方 向 布局 。 在 
盒 布 局 的 方式 下 ， 三 个 栏目 将 在 水 平方 向 上 反 向 显示 ， 如 图 4-3 所 示 。 


4.1.4 调整 元 素 的 位 置 一 一 box-ordinal-group 属性 


可 


CSS 3 新 增 的 box-ordinal-group 属性 ， 用 于 定义 盒 元 素 内 部 的 子 元 素 的 显示 位 置 。 
于 webkit 内 核 的 替代 私有 属性 是 -webkit-box-ordinal-group， 基 于 gecko 内 核 的 替代 ee 
性 是 -moz-box-ordinal-group。 


1. 参数 说 明 


box-ordinal-group 属性 的 语 


吾 法 如 下 : 


box-ordinal-group: <integer>; 


取 值 说 明 如 下 。 
<integer>: 一 个 自然 整数 ， 
新 排序 ， 值 相等 的 ， 将 取决 了 


置 顺序 进行 排列 。 


2. 示例 介绍 


从 1 开始 ， 表 示 子 元 素 的 显示 位 置 。 子 元 素 将 根据 这 个 值 
F 源 代码 的 顺序 。 子 元 素 的 默认 值 均 为 1， 按 照 源 代码 的 位 


基于 示例 4-1， 在 盒 布 局 的 方式 下 ， 调 整 菜单 栏 和 工具 栏 的 显示 位 置 。 调 整 样式 表 
如 下 。 


【示例 4-4】 调整 子 元 素 的 


显示 位 置 。 


<style type="text/css"> 


.container { 


display:—-webkit-box; 


display:-moz-box; 
display:box; 
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/* 定义 为 横向 编排 显示 */ 


—webkit-box-orient:horizontal; /* 兼容 webkit 内 核 */ 
-moz-box-orient:horizontal7 /* 兼容 gecko 内 核 */ 
box-orient:horizontal; /* 标准 用 法 */ 


-container div { 


} 


Color:#FFF; 
font-size:12px; 
padding:10px; 
line-height:20px; 


.container div ul { 


} 


margin:0; 
padding-left:20px; 


.container .left-aside { 


} 


background-color:#F63; 
/* 设置 菜单 栏 的 位 置 为 2*/ 


-webkit-box-ordinal-group:2; /* 兼容 webkit 内 核 */ 
-moz-box-ordinal-group:2; /* 兼容 gecko 内 核 */ 
box-ordinal-group:2; /* 标准 用 法 */ 


.container .center-content { 


} 


background-color:#390; 
width:200px; 


.container .right-aside { 


background-color:#039; 
/* 设置 工具 栏 的 位 置 为 3*/ 


-webkit-box-ordinal-group:3; /* 兼容 webkit 内 核 */ 
-moz-box-ordinal-group:3; /* 兼容 gecko 内 核 */ 
box-ordinal-group:3; /* 标准 用 法 */ 

| 

</style> 


运行 结果 如 图 4-4 所 示 。 


代码 分 析 : 在 示例 4-4 中 ， 把 菜 
box-ordinal-group 
照 预定 的 顺序 显示 。 
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图 4-4 经 过 调整 的 显示 顺序 
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栏 的 box-ordinal-group 属性 设置 为 2， 把 了 


[ 具 栏 的 


属性 设置 为 3， 以 改变 三 个 栏目 的 显示 顺序 。 如 果 4-4 所 示 ， 三 个 栏目 按 
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4.1.5 弹性 空间 分 配 一 一 box-flex 属性 


CSS 3 新 增 的 box-flex 属性 ， 用 于 定义 盒 元 素 内 部 的 子 元 素 是 否 具有 空间 弹性 。 当 盒 
元 素 的 尺寸 缩小 (或 扩大 ) 时 ， 被 定义 为 有 空间 弹性 的 子 元 素 的 尺寸 也 会 缩小 或 扩大 ) 。 
每 当 盒 元 素 有 额外 的 空间 时 ， 具 有 空间 弹性 的 子 元 素 ， 会 扩大 自身 大 小 来 填补 这 一 空间 。 
基于 webkit 内 核 的 替代 私有 属性 是 -webkit-box-flex， 基 于 gecko 内 核 的 奉 代 私有 属性 是 


-moz-box-flex。 


1. 参数 说 明 


box-flex 属性 的 语法 如 下 : 


box-flex: <value>; 


取 值 说 明 如 下 。 

<value>: 该 属性 值 是 一 个 整数 或 者 小 数 ， 不 可 为 负 值 ， 默 认 值 为 0.0。 使 用 空间 弹性 
属性 设置 ， 使 得 盒 元 素 的 内 部 元 素 的 总 宽度 和 总 高 度 ， 始 终 等 于 盒 元 素 的 宽度 与 高 度 。 不 
过 只 有 当 盒 元 素 具 有 确定 的 宽度 或 高 度 时 ， 才 能 表现 出 子 元 素 的 空间 弹性 。 


2. 子 元 素 的 弹性 空间 


下 面 的 示例 中 ， 在 盒 元 素 的 内 部 设置 了 宽度 相等 的 三 栏 菜单 、 文 章 列表 和 工具 ， 并 
设置 菜单 栏 的 box-flex 属性 ， 使 其 具有 空间 弹性 。 
【示例 4-5】 具有 空间 弹性 的 菜单 栏 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 具 有 空间 弹性 的 菜单 栏 </title> 

<style type="text/css"> 

.container { 
width:100%; /* 设置 盒 元 素 的 宽度 为 100s */ 
background-color:#CCC; 
display:-webkit-box; 
display:-moz-box; 
display:box; 

.container div { 
Color:#FFF; 
font-size:12px; 
padding:10px; 
line-height:20px; 
width:100px; /* 设置 三 个 栏目 的 固定 宽度 100px */ 

} 

.container div ul { 
margin:0; 
padding-left:20px; 

} 

.container .left-aside { 
background-color:#F63; 
/* 设置 菜单 栏 具有 空间 弹性 */ 
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-webkit-box-flex:1; 
-moz-box-flex:1; 
box-flex:1; 

} 


/* 兼容 webkit 内 核 */ 
/* 兼容 gecko 内 核 */ 
/* 标准 用 法 */ 


-Container .center-content { 
background-color:#390; 


} 


.container .right-aside 


i 


background-color:#039; 


: 

</style> 

<body> 

<div class="container"> 


<div class="left-aside"> 


<h2> 菜 单 </h2> 
<ul> 
<l1i>HTML5</1i> 
A A be 
<1i> 活 动 沙 龙 </1i> 
</ul> 
</div> 


<div class="center-content"> 


<h2> 文 章 列表 </h2> 

<ul> 
<1i> 文 本 阴影 </1i> 
<1i> 色 彩 模式 </1i> 
<1i> 多 重 背 景 </1i> 
<1i> 边 框 圆 角 </1i> 
<1i> 新 型 盒 布 局 </1i> 
<1i> 盒 子 阴影 </1i> 

</ul> 

</div> 


<div class="right-aside"> 


<h2> 工 具 </h2> 
<ul> 
<1i> 天 气 预报 </1i> 
<1i> 货 币 汇率 </1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


运行 结果 如 图 4-5 所 示 。 
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图 4-5 具有 空间 弹性 的 菜单 栏 
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代码 分 析 : 在 示例 4-5 中 ， 设 置 container 类 的 盒 元 素 的 宽度 为 100%， 即 浏览 器 窗口 
的 宽度 ， 会 随 着 窗口 宽度 的 变化 而 变化 。 把 菜单 栏 的 box-flex 属性 设置 为 1， 使 其 具有 空 
间 弹 性 以 分 配 盒 元 素 的 剩余 空间 。 如 图 4-5 所 示 ， 菜 单 栏 由 灰 线 开始 填充 了 盒 元 素 的 剩余 
空间 ， 菜 单 栏 本 身 的 宽度 变 大 了 。 在 本 示例 中 ， 当 窗口 的 宽度 改变 时 ， 菜 单 栏 的 宽度 也 会 
跟着 变化 。 


3. 多 个 子 元 素 的 弹性 空间 


当 盒 元 素 内 部 的 多 个 子 元 素 都 定义 box-flex 属性 时 ， 子 元 素 的 空间 弹性 是 相对 的 。 浏 
览 器 将 会 把 各 个 子 元 素 的 box-flex 属性 值 相 加 得 到 一 个 总 值 ， 然 后 根据 各 自 的 值 占 总 值 的 
比例 来 分 配 盒 元 素 的 剩余 空间 。 

对 于 示例 4-5 中 的 文章 列表 栏目 也 设置 弹性 ， 值 为 2。 调 整 样式 表 如 下 。 

【示例 4-6】 多 个 子 元 素 的 弹性 空间 分 配 。 


<style type="text/css"> 

.container { 
width:100%; /* 设置 盒 元 素 的 宽度 为 100% */ 
background-color:#CCC; 
display:-webkit-box; 
display:-moz-box; 
display:box; 

} 

.container div { 
Color:#FFF; 
font-size:12px; 
padding:10px; 
line-height:20px; 
width:100px; /* 设置 三 个 栏目 的 固定 宽度 100px */ 

; 

.container div ul { 
margin:0; 
padding-left:20px; 

， 

.container .left-aside { 
background-color:#F63; 
/* 设置 菜单 栏 具有 空间 弹性 */ 


-webkit-box-flex:1; /* 兼容 webkit 内 核 */ 
-moz-box-flex:1; /* 兼容 gecko 内 核 */ 
box-flex:1; /* 标准 用 法 */ 


}; 

.container .center-content { 
background-color:#390; 
/* 设置 文章 列表 栏 有 空间 弹性 */ 


-webkit-box-flex:2; /* 兼容 webkit 内 核 */ 
-moz-box-flex:2; /* 兼容 gecko 内 核 */ 
box-flex:2; /* 标准 用 法 */ 


| 

.container .right-aside { 
background-color:#039; 

} 

</style> 


运行 结果 如 图 4-6 所 示 。 
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文章 列表 


图 4-6 多 个 子 元 素 的 弹性 空间 分 配 


代码 分 析 : 在 示例 4-6 中 ,菜单 栏 的 box-flex 属性 值 为 1， 文章 列表 栏 的 box-flex 属性 
值 为 2。 在 分 配 剩余 空间 的 时 候 ， 菜单 栏 仅 分 配 1/3 的 剩余 空间 ， 文 章 列表 则 分 配 2/3 的 剩 
余 空间 。 如 图 4-6 所 示 ， 各 栏目 中 灰 线 右边 的 部 分 为 弹性 分 配 的 空间 部 分 。 


4.1.6 ”元素 的 对 其 方式 


box-pack 和 box-align 属性 


CSS 3 新 增 的 box-pack 属性 和 box-align 属性 , 分 别 用 于 定义 盒 元 素 内 部 水 平 对 齐 方式 
和 垂直 对 齐 方式 。 这 种 对 齐 方式 ， 对 盒 元 素 内 部 的 文字 、 图 像 及 子 元 素 都 是 有 效 的 。 基 于 
webkit 内 核 的 替代 私有 属性 是 -webkitrbox-pack 和 -webkit-box-align, 基于 gecko 内 核 的 替代 
私有 属性 是 -moz-box-pack 和 -moz-box-align。 

1. 参数 说 明 


box-pack 属性 可 设置 子 元 素 在 水 平方 向 上 的 对 齐 方式 ， 其 语法 如 下 : 


box-pack : start | end | center | justify; 


取 值 说 明 如 下 。 
口 start: 默认 值 ， 表 示 所 有 的 子 元 素 都 显示 在 盒 元 素 的 左 侧 ， 额 外 的 空间 显示 在 盒 元 
素 右 侧 。 


口 end: 表示 所 有 的 子 元 素 都 显示 在 盒 元 素 的 右 侧 ， 额 外 的 空间 显示 在 禽 元 素 左 侧 。 
口 center: 表示 所 有 的 子 元 素 居中 显示 ， 额 外 的 空间 平均 分 配 在 两 侧 。 

口 justify: 表示 所 有 的 子 元 素 散 开 显示 ， 额 外 的 空间 在 子 元 素 之 问 平均 分 配 ， 在 第 一 
个 子 元 素 之 前 和 最 后 一 个 子 元 素 之 后 不 分 配 空间 。 

box-align 属性 可 设置 子 元 素 在 垂直 方向 上 的 对 齐 方式 ， 其 语法 如 下 : 


box-align : start | end | center | baseline | stretch; 


取 值 说 明 如 下 。 

口 start: 表示 所 有 的 子 元素 都 显示 在 盒 元 素 的 顶部 ， 额 外 的 空间 显示 在 盒 元 素 底部 。 

口 end: 表示 所 有 的 子 元 素 都 显示 在 盒 元 素 的 底部 ， 额 外 的 空间 显示 在 盒 元 素 顶 部 。 

口 center: 表示 所 有 的 子 元 素 垂 直 居 中 显示 ， 额 外 的 空间 平均 分 配 在 盒 元 素 的 上 下 
两 侧 。 

口 baseline: 表示 所 有 的 子 元 素 沿 着 基线 显示 。 
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口 stretch: 默认 值 ， 表 示 每 个 子 元 素 的 高 度 被 拉 伸 到 适合 的 盒 元 素 高 度 。 


及 提示: box-pack 属性 和 box-align 属性 仅 在 盒 布 局 模式 下 使 用 。 在 传统 的 对 齐 方式 中 ， 有 
text-align 属性 和 vertical-align 属性 分 别 定义 元 素 内 的 水 平方 向 对 齐 和 垂直 方向 对 
齐 ， 但 不 宜 用 于 盒 布局 。 


2. 自 适应 居中 


在 CSS 2.0 时 代 ， 把 元 素 布局 在 页 面 的 正中 央 ， 是 难以 通过 CSS 样式 表 实 现 的 ， 通 常 
会 借助 JavaScript 技术 来 实现 ， 需 要 写 大 量 代码 ， 还 会 遇 到 兼容 性 问题 。 下 面 我 们 借助 
box-pack 属性 和 box-align 属性 ， 把 一 个 对 话 框 布局 在 页 面 中 央 。 

【示例 4-7】 自 适应 居中 的 登录 框 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 自 适应 居中 的 登录 框 </title> 

<style type="text/css"> 

body, html { 
margin:0; 
padding:0; 
height:100%; 

} 

#box { 
width:100%; 
height:100%; 
background:url (images/sky.jpg) no-repeat 0 0; 
background-size:100% 100%; 
/* 开启 盒 布 局 */ 
display:-webkit-box; 
display:-moz-box; 
display:box; 
/* 水 平 居 中 */ 
-webkit-box-pack:center; 
-moz-box-pack:center; 
box-pack:center; 
/* 垂直 居中 */ 
-webkit-box-align:center; 
-moz-box-align:center; 
box-align:center; 

EF 

#box div { 
opacity:0.8; 

} 

</style> 

<body> 

<div id="box"> 

<div><img src="images/login.png" /></div> 

</div> 

</body> 

</html> 


运行 结果 如 图 4-7 所 示 。 
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图 4-7 自 适应 居中 的 登录 杠 


代码 分 析 : 示例 4-7 中 ， 直 接 使 用 登录 图 片 ， 仅 为 了 说 明 问题 。 设 置 box-pack 属性 值 
为 center， 使 得 登录 框 水 平 居 中 ; 设置 box-align 属性 值 为 center， 使 得 登录 框 垂直 居中 。 
几 行 CSS 样式 就 把 登录 框 布局 到 中 央 了 。 


3. 底部 对 齐 


在 CSS 2.0 时 代 ， 把 元 素 布局 在 页 面 的 底部 也 是 比较 困难 的 。 下 面 借助 box-pack 属性 
和 box-align 属性 来 实现 。 
【示例 4-8】 把 图 片 布局 在 盒 元 素 底部 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 把 图 片 布局 在 盒 元 素 底部 </title> 

<style type="text/css"> 

#box { 
width:500px; 
height:200px; 
border:1px solid #F90; 
/* 开启 盒 布 局 */ 
display:-webkit-box; 
display:-moz-box; 
display:box; 
/* 左边 对 齐 */ 
-webkit-box-pack:start; 
-moz-box-pack: start; 
box-pack:start; 
/* 底部 对 齐 */ 
-webkit-box-align:end; 
-moz-box-align:end; 
box-align:end; 

} 

#box div { 
padding:5px; 
border:1lpx solid #ccc; 
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margin:1px; 
上’ 
#box div img { 
width:120px; 
</style> 
<body> 
<div id="box"> 
<div><img src="images/IL1.jpg" /></div> 
<div><img src="images/IL2.jpg" /></div> 
<div><img src="images/IL3.jpg" /></div> 
<div><img src="images/IL4.jpg" /></div> 
</div> 
</body> 
</html> 


运行 结果 如 图 4-8 所 示 。 


全 把 图 片 布局 在 念 元 素 底 部 
C Q@ym740 
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图 4-8 把 图 片 布局 在 盒 元 素 底部 


代码 分 析 : 在 示例 4-8 中 ， 设 置 box-pack 属性 值 为 start， 使 得 子 元 素 靠 左边 显示 ， 设 
置 box-align 属性 值 为 send， 使 得 子 元 素 紧 贴 底部 显示 。 如 图 4-8 所 示 ， 额 外 的 空间 会 出 现 
在 右 侧 和 项 部 。 


名 提示 : box-pack 属性 和 box-align 属性 的 对 齐 方式 的 效果 ， 还 会 受到 box-orient 属性 和 
box-direction 属性 的 影响 。 当 box-orient 属性 设置 为 重 直 方向 时 ，box-pack 属性 将 
控制 垂直 方向 ，box-align 属性 将 控制 水 平方 向 ; 当 box-direction 属性 设置 为 反 向 
时 ， 对 齐 方式 的 属性 值 start 和 end 将 互 换 效果 。 


4.1.7 ”实验 室 : 使 用 新 型 盒 布 局 设计 网 页 


CSS 3 发 展 的 新 型 盒 布 局 是 一 种 全 新 的 页 面 布局 方式 ， 不 仅 可 以 完全 替代 传统 的 浮动 
布局 ， 而 且 布局 出 来 的 网 页 具有 很 强 的 适应 性 ， 有 具体 的 体现 就 是 其 空间 弹性 。 下 面 就 用 刚 
刚 学 过 的 盒 布 局 知识 来 布局 网 页 。 


1. 案例 简介 


本 节 要 介绍 的 案例 是 一 个 典型 的 小 型 网 页 ， 从 上 至 下 包括 页 头 、 主 体 区 域 和 页 脚 三 个 
部 分 。 其 中 主体 部 分 从 左 至 右 分 为 三 栏 ， 分 别 是 导航 栏 、 文 章 栏 、 侧 边栏 。 而 文章 内 容 栏 
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又 可 以 从 上 至 下 分 为 : 标题 、 内 容 、 日 期 三 栏 。 页 面 效果 如 图 4-9 所 示 ， 下 面 我 们 就 逐步 
布局 该 网 页 。 


9 合用 新 型 全 市 局 设计 同 页 
€ © @ yzmw740:8055 


内 容 ， 盒 布 局 是 CSS3 发 展 的 新 型 布局 
方式 ， 它 比 传统 的 泽 动 布局 方式 更 加 
完善 、 更 加 灵活 ， 而 使 用 方法 却 极为 
简单 。 开启 盒 布 局 后 ， 文 档 就 会 技 照 
盒 布局 默认 的 方式 ， 来 布局 子 元 素 。 


日 期 : 2011-10 


图 4-9 使 用 新 型 盒 布局 设计 网 页 


2. 设计 网 页 元 素 


下 面 给 出 网 页 中 的 HTML 标签 代码 和 基本 的 样式 表 设 置 。 
【示例 4-9】 使 用 新 型 盒 布 局 设计 网 页 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 使 用 新 型 盒 布 局 设计 网 页 </title> 
<style type="text/css"> 
ha 
padding:15px; 
Color:#FFFFFF; 
margin:0px; 
} 
a {color:#fff;} 
</style> 
</head> 
<body> 
<div id="area"> 
<header id="header"> 页 头 : 使 用 新 型 盒 布 局 设计 网 页 </header> 
<div id="container"> 
<nav> 
<h3> 导 航 栏 </h3> 
<a href="#"> 盒 布局 </a> <a href="#"> 布 局 方向 </a> <a href="#"> 布 局 顺序 </a> 
</nav> 
<article> 
<header> 标 题 : 开启 盒 布 局 </header> 
<p> 内 容 : 盒 布局 是 CSS 3 发 展 的 新 型 布局 方式 ， 它 比 传统 的 浮动 布局 方式 更 加 完善 、 更 加 
灵活 ， 而 使 用 方法 却 极为 简单 。 
开启 盒 布 局 后 ， 文 档 就 会 按照 盒 布局 默认 的 方式 ， 来 布局 子 元 素 。</P> 
<footer> 日 期 : 2011-10 </footer> 
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</article> 
<aside> 
<h3> 侧 边栏 </h3> 
<p> 侧 边栏 内 容 </p> 
</aside> 
</div> 
<footer id="footer"> 页 脚 : 201lgcopy; </footer> 
</div> 
</body> 
</html> 


下 面 一 步 一 步 地 给 各 个 功能 块 编写 样式 表 ， 并 追加 到 示例 4-9 中 。 
3. 从 body 元 素 开始 弹性 布局 


把 body 元 素 定义 为 盒 布 局 ， 并 设置 子 元 素 水 平 居 中 。 


body, html { 
margin:0; 
padding:0; 
width:100%; 
height:100%; 
font-family:Arial, Helvetica, sans-serif; 
|; 
body { 
/* 开局 盒 布 局 */ 
display:-webkit-box; 
display:-moz-box; 
display:box; 
/* 设置 盒子 内 元 素 水 平 居中 */ 
-webkit-box-pack:center; 
-moz-box-pack:center; 
box-pack:center; 


4. 定义 网 页 区 域 


设置 网 页 区 域 的 空间 弹性 以 占 满 整个 区 域 。 使 用 盒 布 局 ， 并 设置 垂直 方向 布局 。 


#area { 
height:100%; 
max-width:950px; /* 最 大 宽度 */ 
min-width:600px; /* 最 小 宽度 */ 


/* 定义 空间 弹性 ， 使 其 充满 页 面 空间 ， 但 宽度 受 max-width 和 min-width 限制 */ 
-webkit-box-flex:1; 
-moz-box-flex:1; 

box-flex:1; 

/* 开启 盒 布 局 */ 
display:-webkit-box; 
display:-moz-box; 

display:box; 

/* 垂直 布局 ， 实 现 竖 直方 向 的 三 栏 布 局 */ 
-webkit-box-orient:vertical; 
-moz-box-orient:vertical; 
box-orient:vertical; 
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5. 设置 页 头 、 主 体 区 域 和 页 脚 三 个 部 分 


设置 页 头 、 主 体 区 域 和 页 脚 三 个 部 分 。 其 中 ， 主 体 区 域 部 分 定义 空间 弹性 ， 并 使 用 盒 


布局 及 默认 的 水 平方 向 。 其 他 部 分 为 常规 样式 表 。 


#area header { 
background-color:#ff6600; 
text-align:center; 
line-height:35px; 
Color:#FFFFFF; 
font-size:24px; 
font-weight:bold; 

} 

#area #header { 
padding:15px; 

} 

#area #container { 

/* 定义 空间 弹 ， 使 其 随 空 间 伸缩 尺寸 */ 
-webkit-box-flex:1; 
-moz-box-flex:1; 

box-flex:1; 

/* 开启 盒 布局 */ 
display:-webkit-box; 
display:-moz-box; 

display:box; 

#area footer { 
background-color:#f47D31; 
text-align:center; 
line-height:20px; 
Color:#FFFFFF; 

} 

#area #footer { 
padding:10px; 


6. 设置 主体 区 域 中 的 导航 栏 、 文 章 栏 、 侧 边栏 三 个 部 分 


设置 主体 区 域 中 的 导航 栏 、 文 章 栏 、 侧 边栏 三 个 部 分 。 其 中 ， 文 章 栏 定义 


并 使 用 盒 布 局 和 垂直 方向 布局 。 其 他 部 分 为 常规 样式 表 。 


#area #container nav { 
width:170px; 
background-color:#999; 

. 

#area #container article { 
padding:10px; 

/* 定义 空间 弹 ， 使 其 随 空间 伸缩 尺寸 */ 
-webkit-box-flex:1; 
-moz-box—flex:1; 

box-flex:1; 

/* 开启 盒 布 局 */ 
display:-webkit-box; 
display:-moz-box; 

display:box; 

/* 布局 方向 设置 为 竖 直 方向 */ 


-webkit-box-orient:vertical; 


"00s 
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-moz-box-orient:vertical; 
box-orient:vertical; 
#area #container aside { 
width:170px; 
background-color:#999; 
j: 


7. 分 别 设置 导航 栏 、 文 章 栏 、 侧 边栏 的 详细 部 分 


分 别 设置 导航 栏 、 文 章 栏 、 侧 边栏 的 详细 部 分 。 其 中 文章 栏 中 的 文章 内 容 部 分 设置 为 
空间 弹性 。 其 他 部 分 为 常规 样式 表 。 


/* 左 侧 导 航 */ 

#area #container nav a:link, #area #container nav a:visited { 
display:block; 
border-bottom:3px solid #fff; 
padding:10px; 


text-decoration:none; 
font-weight:bold; 
margin:S5px; 

|; 

#area #container nav a:hover { 
Color:#FFFFFF; 
background-color:#f47D31; 

! 

/* 中 间 内 容 */ 

#area #container article p { 
-webkit-box-flex:1; 
-moz-box-flex:1; 
box-flex:1; 


| 

/* 侧 边 栏 */ 

#area #container aside p { 
padding:15px; 
font-weight:bold; 
font-style:italic; 
Color:#FFF; 

; 


至 此 ， 一 个 典型 的 小 型 网 页 设计 完成 。 该 网 页 在 改变 窗口 大 小 的 情况 下 ， 能 继续 保持 
页 面 总 体格 局 的 完整 。 
4.2 增强 的 盒 模 型 


盒 模型 是 网 页 设计 中 最 基本 、 最 重要 的 模型 。CSS 3 新 增 的 与 盒 模型 有 关 的 属性 如 盒 
子 阴影 、 盒 子 尺 十 和 溢出 处 理 等 ， 为 前 端 设计 师 带 来 更 多 的 便利 及 人 性 化 设计 。 


4.2.1 盒子 阴影 box-shadow 属性 


CSS 3 新 增 的 box-shadow 属性 ， 可 以 定义 元 素 的 阴影 效果 。 关 于 该 属性 ， 设 计 师 们 尤 
其 喜欢 。 到 目前 为 止 ， 已 经 获得 更 多 浏览 器 的 支持 和 更 加 广泛 的 使 用 。 基 于 webkit 内 核 的 
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替代 私有 属性 是 -webkittbox-shadow， 基 于 gecko 内 核 的 替代 私有 属性 是 -moz-box-shadow。 
1. 参数 说 明 
box-shadow 属性 为 盒 元 素 添加 一 个 或 多 个 阴影 。 其 语法 如 下 : 


box-shadow : none | [inset]? [<length>] {2,4} [<color>]?; 


取 值 说 明 如 下 。 

口 none: 默认 值 ， 表 示 没 有 阴影 。 

口 inset: 可 选 值 ， 表 示 设 置 阴影 的 类 型 为 内 阴影 ， 默 认为 外 阴影 。 

口 <length>: 是 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 可 取 负 值 。4 个 length 分 别 
表示 阴影 的 水 平 偏 移 、 垂 直 偏 移 、 模 糊 距离 和 阴影 大 小 ， 其 中 水 平 偏 移 和 垂直 仿 
移 是 必需 的 值 ， 模 糊 半径 和 阴影 大 小 可 选 。 

口 <color>: 可 选 ， 表 示 阴 影 的 颜色 。 

完整 的 阴影 属性 值 包含 6 个 参数 值 : 阴影 类 型 、 水 平 偏 移 长 度 、 垂 直 偏 移 长 度 、 模 糊 
半径 、 阴 影 大 小 和 阴影 颜色 ， 其 中 水 平 偏 移 长 度 和 垂直 偏 移 长 度 是 必需 的 ， 其 他 的 都 可 以 
有 选择 地 省 略 。 


各 提示: 金子 阴影 与 文本 阴影 看 起 来 很 相像 ， 但 是 它们 的 语法 也 是 不 同 的 ， 而 且 念 子 阴影 
应 用 于 页 面 元 素 ， 文 本 阴影 仅 应 用 于 文字 。 


2. 盒子 的 阴影 效果 


F 面 通过 示例 来 全 面 了 解 box-shadow 属性 的 使 用 方法 。 该 示例 是 为 桶 黄色 的 仿 元 素 设 
置 阴影 。 其 中 阴影 在 水 平和 垂直 方向 上 的 距离 均 为 Spx， 模 糊 作用 距离 为 Spx， 阴 影 颜色 为 
【示例 4-10】 给 盒 元 素 添 加 阴影 效果 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<tit1e> 盒 子 阴影 </tit1le> 

<style type="text/css"> 

div { 
width:200px; 
height:100px; 
background-color:#f£90; 
-webkit-box-shadow:5px 5px 5px #333; /* 兼容 webkit 内 核 */ 
-moz-box-shadow:5px 5px 5px #333; /* 兼容 gecko 内 核 */ 
box-shadow:5px 5px Spx #333; /* 标准 用 法 */ 

} 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


运行 结果 如 图 4-10 所 示 。 
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图 4-10 颌 元 素 的 阴影 效果 


代码 分 析 : 在 示例 4-10 中 ， 我 们 为 盒子 的 阴影 属性 设置 了 水 平 偏 移 值 、 垂 直 偏 移 值 、 
模糊 距离 和 阴影 颜色 。 阴 影 类 型 是 默认 的 外 部 阴影 ， 如 图 4-10 所 示 。 
如 果 水 平 偏 移 值 和 垂直 偏 移 值 为 负数 ， 表 示 阴 影 向 左 或 向 上 偏 移 。 调 整 样式 表 如 下 : 
<style type="text/css"> 
div { 
width:200px; 
height:100px; 
background-color:#f£90; 


-webkit-box-shadow:-5px -5px 5px #00f; /* 兼容 webkit 内 核 */ 
-moz-box-shadow: -5px -5px Spx #00f; /* 兼容 gecko 内 核 */ 
box-shadow:-5px -5px Spx #00f; /* 标准 用 法 */ 

} 

</style> 


运行 结果 如 图 4-11 所 示 。 


图 4-11 盒 元 素 的 左上 方 阴影 效果 


box-shadow 属性 还 可 以 同时 使 用 两 种 及 两 种 以 上 的 阴影 。 调 整 样式 表 如 下 : 


<style type="text/css"> 
div { 
margin:20px auto; 
width:200px; 
height:100px; 
background-color:#f90; 
-webkit-box-shadow:-5px -5px Spx 0 #00f, 
Srpx Sox Spx 0 #3337 
-moz-box-shadow:-5px -5px Spx 0 #00f, 
Spr Dex px 0 4333: 
box-shadow:-5px -5px 5px 0 #00f, 
5px Spx 5px 0 #333; 


} 
</style> 
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运行 结果 如 图 4-12 所 示 。 


图 4-12 同时 应 用 两 种 阴影 的 效果 


3. 盒子 的 描 边 效果 


f 


box-shadow 属性 可 以 给 盒子 设置 丰富 的 描 边 ， 这 种 描 边 效果 可 以 替代 单调 的 边框 。 


实现 描 边 的 方法 是 把 水 平 偏 移 值 和 垂直 偏 移 值 设置 为 0， 仅 设置 模糊 半径 、 阴 影 大 小 和 阴 
影 颜 色 。 
【示例 4-11】 设计 盒子 的 描 边 效果 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 
<tit1le> 盒 子 描 边 效果 </title> 
<style type="text/css"> 
div { 


} 


margin:20px auto; 

width:200px; 

height:100px; 

background-color:#f907 
-webkit-box-shadow:0 0 5px 5px #333; 
-moz-box-shadow:0 0 5px 5px #333; 
box-shadow:0 0 5px S5px #333; 


</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


运行 结果 如 图 4-13 所 示 。 
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图 4-13 盒子 的 描 边 效果 
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代码 分 析 : 示例 4-11 中 ,， 仅 设置 了 模糊 半径 、 阴 影 大 小 和 颜色 ， 就 可 以 实现 如 图 4-13 
所 示 的 描 边 效果 。 如 果 不 设置 模糊 半径 ， 则 描 边 效果 就 等 同 于 边框 效果 了 。 调 整 样式 表 
如 下 : 


<style type="text/css"> 

div { 
margin:20px auto; 
width:200px; 
height:100px; 
background-color:#f£90; 
-webkit-box-shadow:0 0 0 5px #333; 
-moz-box-shadow:0 0 0 5px #333; 
box-shadow:0 0 0 5px #333; 


| 
</style> 


运行 结果 如 图 4-14 所 示 。 


图 4-14 没有 模糊 半径 的 描 边 效果 


4. 盒子 的 内 阴影 


box-shadow 属性 中 添加 值 inset， 即 可 实现 向 内 的 阴影 。 
【示例 4-12】 设计 盒子 的 内 阴影 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 盒 子 的 内 阴影 </title> 

<style type="text/css"> 

div { 
width:200px; 
height:100px; 
background-color:#f90; 
-webkit-box-shadow: inset 5Px 5px 5px #333; 
-moz-box-shadow: inset 5px 5Px 5px #333; 
box-shadow: inset 5px 5px Spx #333; 

} 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


/* 兼容 webkit 内 核 */ 
/* 兼容 gecko 内核 */ 
/* 标准 用 法 */ 
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结果 如 图 4-15 所 示 。 


Gd 
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图 4-15 盒子 的 内 阴影 效果 
代码 分 析 : 示例 4-12 中 ， 在 box-shadow 属性 中 增加 属性 值 mset， 即 实现 了 内 阴影 。 


4.2.2 盒子 尺寸 的 计算 方 ; 


对 于 前 端 工程 师 和 设计 人 员 来 说 ， 应 该 都 有 过 这 样 的 经 历 : 当 为 一 个 盒 元 素 同 时 设置 
border、padding 和 width 或 height 属性 时 ， 在 不 同 的 浏览 器 下 ， 会 有 不 同 的 尺寸 。 特 别 是 
在 正 浏 览 器 中 ，width 和 height 是 包含 border 和 padding 的 ， 标 准 的 width 和 height 是 不 
包含 border 和 padding 的 。 为 此 ， 要 写 大 量 的 hack， 以 满足 不 同 浏览 器 的 需要 。 

CSS 3 对 盒 模型 进行 了 改善 ， 新 增 的 box-sizing 属性 ， 可 用 于 定义 width 和 height 的 计 
算 方 法 ， 可 自由 定义 是 否 包含 border 和 padding。 


1. 参数 说 明 
box-sizing 属性 定义 盒 元 素 尺寸 的 计算 方法 。 其 语法 如 下 : 


box-sizing : content-box | padding-box | border-box | inherit ; 


取 值 说 明 如 下 。 

口 content-box: 默认 值 ， 计 算 方法 为 width/height=content， 表 示 指 定 的 宽度 和 高 度 仅 
限 内 容 区域 ， 边 框 和 内 边 距 的 宽度 不 包含 在 内 。 

口 padding-box: 计算 方法 为 width/height=content+padding， 表示 指定 的 宽度 和 高 度 包 
含 内 边 距 和 内 容 区 域 ， 边 框 宽度 不 包含 在 内 。 

口 border-box: 计算 方法 为 width/height=content+padding+border， 表 示 指 定 的 宽度 和 
高 度 包含 边框 、 内 边 距 和 内 容 区 域 。 

口 inherit， 表示 继承 父 元 素 中 box-sizing 属性 的 值 。 


示例 介绍 


下 面 的 示例 中 ,把 div 标签 默认 设置 为 宽 200px, 高 80px, 边框 宽 10px, 内 边 距 宽 10px。 
然后 分 别 设置 不 同 的 属性 box-sizing 的 值 ， 以 观察 各 个 属性 值 的 区 别 。 

【示例 4-13】 盒子 尺寸 的 计算 方法 。 

ZIDOCTYPE HTML> 

<html> 


<head> 
<meta charset="utf-8"> 


<title> 盒 子 尺寸 的 计算 方法 </title> 


"106 


第 4 章 灵活 的 盒 布 局 和 界面 设计 


<style type="text/css"> 


div { 
margin:S5px; 
width:200px; /* 宽度 为 200px */ 
height:80px; /* 高 度 为 80px */ 


background-color:#fe0; 
border:10px solid #f£90; /* 边框 宽度 为 10px */ 
padding:10px; /* 内 边 距 宽度 为 10px */ 
font-weight:bold; 
font-size:18px; 
line-height:40px; 

有 

/* 属性 值 border-box */ 

ey 
box-sizing:border-box; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 

} 

/* 属性 值 padding-box */ 

=32 
box-sizing:padding-box; 
-webkit-box-sizing:padding-box; 
-moz-box-sizing:padding-box; 


/* 属性 值 content-box */ 
33 
box-sizing:content-box; 
-webkit-box-sizing:content-box; 
-moz-box-sizing:content-box; 
} 
</style> 
</head> 
<body> 
<div class="sl">border-box</div> 
<div clas s2">padding-box</div> 
<div class="s3">content-box</div> 
</body> 
</html> 


运行 结果 如 图 4-16、 图 4-17 所 示 。 


站 辣子 尺 二 的 和 方 丢 


图 4-16 Firefox 中 预览 的 效果 图 4-17 chrome 中 预览 的 效果 
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代码 分 析 : 在 示例 4-13 中 ， 由 于 尺寸 的 计算 方式 不 同 ， 元 素 的 总 尺寸 也 不 相同 。 由 于 
webkit 内 核 的 浏览 器 不 支持 属性 值 padding-box， 故 表现 出 默认 的 content-box 效果 。 


4.2.3 盒子 溢出 内 容 处 理 一 一 overflow-x 和 overflow-y 属性 


在 CSS 2.1 规范 中 ， 就 已 经 有 处 理 溢出 的 overflow 属性 ， 该 属性 定义 当 盒子 的 内 容 超 
出 盒子 边界 时 的 处 理 方法 。CSS 3 新 增 的 overflow-x 和 overflow-y 属性 ， 是 对 overflow 属 
性 的 补充 ， 分 别 表 示 水 平方 向 上 的 溢出 处 理 和 垂直 方向 上 的 溢出 处 理 。 


1. 参数 说 明 


overflow-x 和 overflow-y 属性 的 语法 如 下 : 


overflow-x : visible | auto | hidden | scroll | no-display | no-content; 
overflow-y : visible | auto | hidden | scroll | no-display | no-content; 


取 值 说 明 : 

口 visible: 默认 值 ， 盒 子 洪 出 时 ， 不 裁剪 溢出 的 内 容 ， 超 出 盒子 边界 的 部 分 将 显示 在 
盒 元 素 之 外 。 

口 auto: 盒子 溢出 时 ， 显 示 滚 动 条 。 

口 hidden: 盒子 溢出 时 ， 溢 出 的 内 容 将 被 裁剪 ， 并 且 不 提供 滚动 条 。 

口 scroll: 始终 显示 滚动 条 。 

口 no-display: 当 盒子 溢出 时 ， 不 显示 元 素 。 该 属性 值 是 新 增 的 。 

口 no-content: 当 盒子 溢出 时 ， 不 显示 内 容 。 该 属性 值 是 新 增 的 。 

2. 示例 介绍 


下 面 通过 一 个 示例 来 介绍 溢出 处 理 的 各 个 属性 值 的 应 用 效果 。 
【示例 4-14】 人 留 子 溢出 内 容 处 理 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 盒 子 溢出 内 容 处 理 </title> 

<style type="text/css"> 

div { 
margin:10px; 
width:200px; 
height:80px; 
padding:10px; 
border:1lpx solid #f90; 
float:left; 


#boxl1 { 
overflow-x:scroll; /* 水 平方 向 属性 值 为 scroll */ 
overflow-y:scroll; /* 垂直 方向 属性 值 为 scroll */ 
a { 
overflow-x:auto; /* 水 平方 向 属性 值 为 auto */ 
overflow-y:auto; /* 垂直 方向 属性 值 为 auto */ 
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上 


#box3 { 
overflow-x:hidden; /* 水 平方 向 属性 值 为 hidgen */ 
overflow-y:hidden; /* 垂直 方向 属性 值 为 hidden */ 
} 
#box4 { 


overflow-x:visible; /* 水 平方 向 属性 值 为 visible */ 
overflow-y:visible; /* 垂直 方向 属性 值 为 visible */ 
} </style> 
</head> 
<body> 
<div id="box1"> 盒 模型 是 网 页 设计 中 最 基本 、 最 重要 的 模型 。。。</div> 
<div idq="box2"> 盒 模型 是 网 页 设计 中 最 基本 、 最 重要 的 模型 。。。</div> 
<div id="box3"> 盒 模型 是 网 页 设计 中 最 基本 、 最 重要 的 模型 。。。</div> 
<div idq="box4"> 盒 模型 是 网 页 设计 中 最 基本 、 最 重要 的 模型 。。。</adiv> 
</body> 
</html> 


运行 结果 如 图 4-18 所 示 。 


o 


o 


OF 
C Gyvartn 


CSS3 
新 增 栈 -各 异 蕊 丰 类 的 属 的 

性 如 盒 了 阴影 、 会: 了 尺寸 有 盒 会 子 阴影 、 盒子 尺寸 
Le > 亲 浊 出 从 天 和 为 前 端 设 


盒 模型 是 网 页 设 证 生 
本 、 


盒 模型 是 网 页 设计 中 最 基 盒 模型 是 网 页 设计 中 最 基 
二、 i 本 、 lL 


增 的 增 的 与 
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处 理 等 ， 为 前 端 设计 师 带 来 ， 处 理 等 ， 为 前 端 设计 师 带 来 
更 多 的 便利 及 人 性 化 设计 。 


图 4-18 盒子 溢出 内 容 的 处 理 效 果 


代码 分 析 : 在 示例 4-14 中 ， 分 别 为 每 个 div 元 素 设置 不 同 的 溢出 处 理 方式 。 如 图 4-18 

Me 溢出 属性 值 为 scroll 时 ， 水 平方 向 和 垂直 方向 均 显 示 滚 动 条 ; 溢出 属性 值 为 auto 时 ， 

只 有 在 需要 滚动 条 的 时 候 ， 才 会 显示 滚动 条 ; 溢出 属性 值 为 hidden 时 ,会 裁剪 一 部 分 溢出 
的 内 容 ; 溢出 属性 值 为 visible 时 ， 溢 出 的 内 容 会 显示 在 盒子 边界 的 外 面 。 


4.2.4 实验 室 : 设计 网 站 服务 条 款 页 面 


当 一 些 网 站 提供 一 些 服务 时 ， 都 会 有 相应 的 服务 条 款 。 服 务 条 款 的 页 面 比较 简单 ， 但 
可 以 实现 不 同 的 风格 。 下 面 将 使 用 前 面 学 过 的 样式 表 属 性 来 修饰 这 个 页 面 。 
1. 案例 简介 


本 节 介绍 的 案例 只 有 一 个 主体 区 域 ， 我 们 将 把 该 主体 区 域 设计 成 凸 起 的 效果 ， 然 后 在 
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这 个 凸 起 的 区 域 里 放置 内 容 。 由 于 条 款 内 容 较 长 ， 还 需要 处 理 内 容 的 溢出 ， 页 面 效 果 如 图 
4-19 所 示 。 下 面 就 逐步 设计 该 网 页 。 


图 合子 邱 内 阴影 
© |© yrv740:8080/hc/Chapter4/Code4-Test2. htal 


网 站 服务 条 款 

用 户 必须 单独 承担 发 布 内 容 的 责任 。 用 户 对 论坛 服务 的 使 用 是 根据 所 
有 适用 于 本 论坛 的 国家 法 律 、 地 方法 律 和 国际 法 律 标准 的 。 

用 户 不 得 在 本 站 论坛 发 布 含有 下 列 内 容 之 一 的 信息 

(1) 反对 宪法 所 确定 的 基本 原则 


(2) 危害 国家 安全 ,泄露 国家 秘密 ,颠覆 国家 政权 ,破坏 国家 统一 ; 


同意 | | 不 同意 | 


图 4-19 网 站 服务 条 款 效果 图 


2. 设计 网 页 元 素 


网 页 只 有 一 个 主体 区 域 , 该 区 域 包括 头 部 的 标题 、 中 间 的 条 款 区 域 和 底部 的 确认 按钮 。 
【示例 4-15】 设计 网 站 服务 条 款 页 面 。 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 网 站 服务 条 款 </title> 
</head> 
<body> 
<div id="policy"> 
<header> 网 站 服务 条 款 </header> 
<section> 
<p> 用 户 必须 单独 承担 发 布 内 容 的 责任 。 用 户 对 论坛 服务 的 使 用 是 根据 所 有 适用 于 本 论坛 的 国 
家 法 律 、 地 方法 律 和 国际 法 律 标准 的 。</p> 
<p> 用 户 不 得 在 本 站 论坛 发 布 含有 下 列 内 容 之 一 的 信息 :</p> 
<p> (1) 反对 宪法 所 确定 的 基本 原则 </p> 
<p> (2) 危害 国家 安全 , 泄露 国家 秘密 ,颠覆 国家 政权 ,破坏 国家 统一 ; </p> 
<p> (3) 损害 国家 荣誉 和 利益 ; </p> 
<p> (4) 煽动 民族 仇恨 、 民 族 歧视 ,破坏 民族 团结 ; </p> 
<p> (5) 破坏 国家 宗教 政策 , 宣扬 邪教 和 封建 迷信 ; </p> 
<p> (6) 散布 谣言 ,扰乱 社会 秩序 ,破坏 社会 稳定 ;</p> 
<p> (7) 散布 淫秽 、 色 情 、 赌 博 、 暴 力 、 凶 杀 、 瓯 怖 或 者 教唆 犯罪 </p> 
<p> (8) 侮辱 或 者 诽谤 他 人 ,侵害 他 人 合法 权益 ;</P> 
<p> (9) 连锁 信件 , 金字 塔 方案 及 串 惑 性 文章 ;</p> 
<p> (10) 任何 涉及 他 人 版 权 的 资料 的 非法 复制 和 传播 ; </p> 
<p> (11) 任何 未 经 本 站 许可 的 商业 性 质 的 广告 ; </p> 
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<p> (12) 含有 法 律 、 行 政法 规 禁止 的 其 他 内 容 。</p> 
</section> 
<footer> 
<input type="button" value=" 同 意 "” /> 
<input type="button" value=" 不 同意 "” /> 
</footer> 
</div> 
</body> 
</html> 


下 面 ， 我 们 逐步 设计 样式 表 ， 并 追加 到 示例 4-15 中 。 

3. 首先 设计 主体 区 域 样式 

设置 主体 区 域 页 面 居中 ; 设置 尺寸 及 其 计算 方式 ， 以 保证 内 部 的 条 款 区 域 的 空间 ;， 设 
置 背景 颜色 及 向 内 的 阴影 ， 以 实现 主体 区 域 的 凸 起 效果 。 


<style type="text/css"> 


#policy { 
font-family:Arial， 宋 体 ; 
margin:10px auto; /* 页 面 居中 */ 
box-sizing:content-box; /* 尺寸 计算 方式 为 content-box */ 
width:400px; /* 盒子 宽 400px */ 
padding:20px; /* 内 边 距 为 20px */ 
background-color:#e4e4ed; /* 浅 灰色 背景 */ 


box-shadow:inset 0 0 15px 5Px #bbb; /* 向 内 的 阴影 */ 


</style> 


4. 设计 主体 区 域内 部 的 样式 


分 别 设计 主体 区 域 中 的 头 部 标题 、 中 间 的 条 款 和 底部 的 按钮 。 其 中 ， 中 间 条 款 的 尺寸 
包含 到 边框 ,水 平方 向 不 设置 滚动 条 ， 垂直 方向 设置 深 动 条 。 底 部 按钮 也 增加 了 阴影 效果 。 


<style type="text/css"> 

#policy header { 
font-size:24px; 
font-weight:bold; 
line-height:25px; 

} 

#policy section { 
background-color:#fff; 
font-size:12px; 
line-height:25px; 


box-sizing:border-box; /* 尺寸 计算 方式 为 border-box */ 
width:400px; /* 盒子 宽 400Px */ 
height:200px; /* 盒子 高 200px */ 
padding:10px; /* 内 边 距 为 10px */ 
border:1lpx solid #CCC; 

overflow-x:hidden; /* 水 平方 向 不 设置 滚动 条 */ 
overflow-y:scroll; /* 垂直 方向 设置 滚动 条 */ 


} 

#policy footer { 
text-align:center; 
padding-top: 5px; 


二 
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#policy footer input { 
border:lpx solid #666; 
box-shadow:2px 2px lpx #BBB; /* 按钮 阴影 */ 
} 
</style> 
至 此 ， 完 成 了 服务 条 款 页 面 的 设计 ， 即 可 以 展现 如 图 4-19 所 示 的 页 面 效 果 。 该 页 面 没 
有 借助 任何 图 片 ， 全 部 使 用 CSS 设计 完成 。 


4.3 增强 的 用 户 界 面 设计 


在 界面 设计 方面 , 为 了 增强 用 户 体验 , 设计 师 们 会 想 尽 办 法 来 实现 心目 中 的 页 面 效果 ， 
也 因此 徒 增 很 多 工作 量 。CSS 3 在 用 户 界面 的 设计 方面 有 很 大 的 改进 ， 可 以 允许 改变 元 素 
尺寸 、 定 义 外 轮廓 线 、 改 变焦 点 导航 顺序 、 让 元 素 变 身 ， 以 及 给 元 素 添 加 内 容 等 。 这 些 功 
能 的 改进 ， 使 得 设计 师 设计 出 的 页 面具 有 更 加 强大 的 用 户 体验 。 


4.3.1 ”允许 用 户 改变 尺寸 


resize 属性 


如 果 你 在 使 用 Firefox 或 Chrome， 那 么 你 肯定 注意 到 了 textarea 标签 元 素 的 右 下 角 默 
认 有 个 小 的 手柄 ， 它 可 以 让 你 调整 元 素 的 大 小 。CSS 3 新 增 的 resize 属性 ， 可 以 对 其 他 元 
素 也 应 用 同样 的 效果 。 


1. 参数 说 明 
resize 属性 定义 一 个 元 素 是 否 允 许 用 户 调整 大 小 。 其 语法 如 下 : 


resize : none | both | horizontal | vertical | inherit ; 


取 值 说 明 如 下 。 

口 none: 默认 值 ， 表 示 用 户 不 能 调整 元 素 。 

口 both: 表示 用 户 可 以 调整 元 素 的 宽度 和 高 度 。 

口 horizontal: 表示 用 户 可 以 调整 元 素 的 宽度 ， 但 不 能 调整 元 素 的 高 度 。 
口 vertical: 表示 用 户 可 以 调整 元 素 的 高 度 ， 但 不 能 调整 元 素 的 宽度 。 
口 inherit: 表示 继承 父 元 素 。 


全 提示 : resize 属性 需要 和 溢出 处 理 属性 overflow 或 overflow-x 或 overflow-y 一 起 使 用 ， 
才能 把 元 素 定义 成 可 以 调整 大 小 的 ， 且 溢出 属性 值 不 能 为 visible。 


2. 示例 介绍 


下 面 看 一 下 resize 属性 的 如 何 使 用 及 其 使 用 效果 。 
【示例 4-16】 可 以 调整 大 小 的 div 元 素 。 


<!DOCTYPE HTML> 
<html> 
<head> 
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<meta charset="utf-8"> 

<title> 可 以 调整 大 小 的 div 元 素 </title> 

<style type="text/css"> 

div { 
width:100px; 
height:80px; 
max-width:600px; /* 设置 最 大 宽度 限制 */ 
max-height :400px; /* 设置 最 大 高 度 限制 */ 
padding:10px; 
border:lpx solid #f£90; 


resize:both; /* 设置 元 素 的 宽度 和 高 度 均 可 调整 */ 
overflow:auto; /* 设置 游 出 属性 值 为 auto */ 
</style> 
</head> 
<body> 


<div> 如 果 你 在 使 用 Firefox 或 Chrome, 那么 你 肯定 注意 到 了 textarea 标签 元 素 的 右 下 角 默 

认 有 个 小 的 手柄 ， 它 可 以 让 你 调整 它们 的 大 小 。 

CSS 3 新 增 的 resize 属性 ， 可 以 对 其 他 元 素 也 应 用 同样 的 效果 。resize 属性 定义 一 个 元 
素 是 否 允 许 用 户 调整 大 小 。</div> 


</body> 
</html> 


运行 结果 如 图 4-20 所 示 。 


如 果 你 在 使 用 
Firefox 或 Chrome， 


那么 你 青 定 注意 到 了 
textarea 标 得 元 素 

的 右 下 角 默 认 有 个 小 
手柄 ， 它 可 以 让 你 
应 用 同样 的 效果 。 resize 
定 》 个 元 素 是 否 人 允许 用 户 调整 


图 4-20 可 以 自由 调整 的 div 元 素 


代码 分 析 : 在 示例 4-16 中 ， 设 置 resize 属性 值 为 both， 并 且 设 置 了 overflow 属性 为 
auto， 这 样 在 运行 出 来 的 页 面 里 就 可 以 调整 该 元 素 的 大 小 。 示 例 中 还 设置 了 最 大 宽度 和 最 
大 高 度 ， 在 用 户 调整 元 素 的 大 小 时 , 会 限制 在 最 大 尺寸 范围 内 。 如 图 4-20 所 示 为 元 素 调整 
大 小 前 后 的 变化 。 


4.3.2 ”定义 外 轮廓 线 一 一 outline 属性 


outline 属性 可 以 定义 一 个 元 素 的 外 轮廓 线 ， 以 突出 显示 该 元 素 。 外 轮廓 线 看 起 来 很 像 
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元 素 边框 ， 而 且 语 法 也 与 边框 非常 类 似 ,但 是 外 轮廓 线 不 占用 元 素 的 尺寸 。outline 属性 属 
性 在 CSS 2.1 中 已 经 定义 ， 但 没有 获得 浏览 器 支持 。CSS 3 完善 并 增强 了 该 属性 ， 并 获得 
了 各 主流 浏览 器 的 支持 。 


1. 参数 说 明 

outline 属性 用 来 在 元 素 周围 定义 轮廓 线 ， 其 语法 如 下 : 

outline : [outline-width] || [outline-style] || [outline-color] |inherit ; 
取 值 说 明 如 下 。 


口 <outline-width>: 定义 元 素 轮廓 的 宽度 。 

口 <outline-style>: 定义 元 素 轮廓 的 样式 风格 。 

口 <outline-color>: 定义 元 素 轮廓 的 颜色 。 

口 inherit: 表示 继承 父 元 素 的 轮廓 样式 。 

outline 属性 与 border 属性 有 很 多 相似 的 地 方 ， 但 也 有 很 大 的 不 同 。outline 属性 定义 的 
外 轮廓 线 总 是 封闭 的 、 完 全 闭合 的 ; 外 轮廓 线 也 可 能 不 是 矩形 ， 如 果 元 素 的 display 属性 值 
为 mline， 外 轮廓 就 可 能 变 得 不 规则 。 

outline 属性 是 一 个 复合 的 属性 。 它 包含 了 4 个 子 属 性 : outline-width 属性 、outline-style 
属性 、outline-color 属性 和 outline-offset 属性 。 


2. 轮廓 的 宽度 属性 outline-width 
outline-width 属性 ， 用 于 定义 元 素 轮廓 的 宽度 。 语 法 如 下 : 


outline-width : thin | medium | thick | <length> | inherit ; 


取 值 说 明 如 下 。 

thin: 定义 较 细 的 轮廓 宽度 。 

medium: 为 默认 值 ， 定 义 中 等 的 轮廓 宽度 。 

thick: 定义 较 粗 的 轮廓 宽度 。 

<length>: 定义 轮廓 的 宽度 值 ， 宽 度 值 包含 长 度 单 位 ， 不 允许 为 负 值 。 
inherit， 表 示 继 承 父 元 素 。 

3. 轮廓 的 风格 属性 outline-style 


outline-style 属性 ， 用 于 定义 元 素 轮廓 的 风格 样式 。 语 法 如 下 : 


outline-style : none | dotted | dashed | solid | double | groove | ridge 
| inset | outset | inherit ; 


取 值 说 明 如 下 。 

none: 定义 没有 轮 廊 。 

dotted: 定义 轮廓 为 点 状 。 

dashed: 定义 轮廓 为 虚线 。 

solid: 定义 轮廓 为 实 线 。 

double: 定义 轮廓 为 双 线 条 ， 双 线 的 宽度 等 于 outline-width 属性 的 值 。 


扎 品 日 日 
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groove: 定义 轮廓 为 3D 止 槽 ， 显 示 效 果 取 决 于 outline-color 属性 的 值 。 
ridge: 定义 轮廓 为 3D 凸 槽 ， 显 示 效 果 取 决 于 outline-color 属性 的 值 。 
inset: 定义 轮廓 为 3D 四边， 显示 效果 取决 于 outline-color 属性 的 值 。 
outset: 定义 轮廓 为 3D 凸 边 ， 显 示 效 果 取 决 于 outline-color 属性 的 值 。 
inherit: 表示 继承 父 元 素 。 


4. 轮廓 的 颜色 属性 outline-color 


回国 :' 国 .: 国 “ 国 


outline-color 属性 ， 用 于 定义 元 素 轮廓 的 颜色 。 语 法 如 下 : 

outline-color : <color> | invert | inherit ; 

取 值 说 明 如 下 。 

口 <color>: 表示 颜色 值 。CSS 中 可 使 用 的 任何 颜色 ， 也 可 以 是 半 透 明 颜 色 。 
口 invert: 为 默认 值 ， 执 行 颜色 反 转 ， 以 保证 轮廓 在 任何 背景 下 都 是 可 见 的 。 
口 inherit: 表示 继承 父 元 素 。 


5. 轮廓 的 偏离 属性 outline-offset 


outline-offset， 用 于 定义 外 轮廓 与 元 素 边界 的 距离 。 语 法 如 下 : 


outline-offset : <length> | inherit ; 


取 值 说 明 如 下 。 
口 <length>: 表示 偏离 距离 的 长 度 值 ， 长 度 值 包含 长 度 单位 ， 可 以 为 负 值 。 
口 inherit 表示 继承 父 元 素 。 


全 提示 : 在 复合 属性 outline 的 语法 中 ,没有 包含 outline-offset 子 属性 ， 因 为 这 样 会 造成 长 
度 值 指定 不 明确 ， 无 法 正确 解析 。 


6. 示例 介绍 


下 面 我 们 用 outline 属性 来 设置 表单 。 该 示例 中 把 整个 登录 区 域 、 文 本 框 和 按钮 ， 均 设 
置 outline 属性 ， 以 展现 该 属性 的 用 途 。 
【示例 4-17】 使 用 外 轮廓 泻 染 登录 表单 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 使 用 外 轮廓 渲染 登录 表单 </title> 

<style type="text/css"> 

#login { 
margin:20px auto; 
width:300px; 
border:1lpx solid #f£90; 
padding:20px; 
line-height:22px; 
outline:2px solid #ccc; /* 设置 外 轮廓 */ 
background-color:#ffff99; 
font-size:18px; 


wy 
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#login hl { 
font-size:18px7 
margin:0; 
padding:5px; 
border-bottom:1lpx solid #fc6; 
margin-bottom:10px; 

' 

#login label { 
display:block; 
width:100px; 
float:left; 
text-align:right; 
clear:left; 
margin-top:15px; 

二 

#login input { 
float:left; 
width:150px; 
margin-top:15px; 
line-height:22px; 
height:24px; 
border:1lpx solid #7f9db9; 

} 

#login input:focus { 
outline:4px solid #fc6; /* 设置 外 轮廓 */ 

#login div { 
clear:both; 
padding-left:100px; 
padding-top:20px; 
font-size:12px; 

} 

#login div button { 
width:80px; 
font-size:14px; 
line-height:22px; 
background-image: -moz-linear-gradient (top, #ffffcc, #ffcc99); 


/* 渐变 */ 
background-image: -webkit-gradient (linear, left top, left bottom, 
from(#ffffcc), to(#ffcc99)); /* 渐变 */ 
border:1lpx solid #f90; 

} 
#login div button:hover { 
outline:2px solid #fc6; /* 设置 外 轮 序 */ 
} 
</style> 
</head> 
<body> 


<form id="forml" name="forml" method="post" action=""> 
<div id="login"> 
<h1> 用 户 登 录 </h1> 
<label] for="UserName"> 用 户 名 : </label> 
<input type="text" name="UserName" id="UserName"> 
<label for="Password"> 密 码 : </label> 
<input type="password" name="Password" id="Password"> 
<div><button> 登 录 </button><a href="#"> 忘 记 密 码 ? </a> </div> 
</div> 
</form> 
</body> 
</html> 
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运行 结果 如 图 4-21 所 示 。 


图 4-21 使 用 外 轮廓 泻 染 登录 表单 


代码 分 析 : 在 示例 4-17 中 ， 均 使 用 复合 属性 outline 设置 轮廓 。 整 个 登录 区 域 设置 了 
外 轮廓 线 ， 以 丰富 边框 效果 ; 文本 框 获取 焦点 时 ， 设 置 外 轮廓 线 ， 以 突出 获取 焦点 的 文本 
框 ， 鼠 标 经 过 登录 按钮 时 ， 也 设置 外 轮廓 线 突出 显示 ， 效 果 如 图 4-21 所 示 。 

如 果 设 置 outline-offset 属性 ， 则 外 轮廓 线 就 不 会 紧 贴 元 素 显示 ， 看 起 来 也 更 加 大 方 。 
调整 文本 框 焦点 样式 如 下 : 


<style type="text/css"> 


#1login input:focus { 


outline:4px solid #fc6; /* 设置 外 轮廓 */ 
outline-offset:5px; /* 设置 外 轮廓 与 元 素 边界 的 距离 */ 
ee 


运行 结果 如 图 4-22 所 示 。 


ic/Chapter4/Code4-Test. htnl 家 和 


图 4-22 ”轮廓 远离 文本 框 边界 
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如 果 设 置 outline-offset 属性 为 负 值 时 ， 则 轮廓 线 就 会 显示 在 元 素 的 内 部 。 调 整 文本 杠 
焦点 样式 如 下 : 


<style type="text/css"> 


#login input:focus { 


outline:4px solid #fc6; /* 设置 外 轮廓 */ 
outline-offset:-7px; /* 设置 外 轮廓 与 元 素 边 界 的 距离 */ 
是 
本 


运行 结果 如 图 4-23 所 示 。 


图 4-23 轮廓 在 文本 框 内 部 


4.3.3 伪装 的 元 素 一 -appearance 属性 


你 是 否 曾经 把 链接 伪装 成 按钮 ， 或 者 在 伪装 的 按钮 上 输入 字符 ? CSS 新 增 的 
appearance 属性 ， 可 以 方便 地 把 元 素 伪装 成 其 他 类 型 的 元 素 ， 给 界面 设计 带 来 极 大 的 灵活 
性 。 基 于 webkit 内 核 的 奉 代 私有 属性 是 -webkit-appearance， 基 于 gecko 内 核 的 奉 代 私有 属 


性 是 -moz-appearance。 
1. 参数 说 明 
appearance 属性 用 于 定义 一 个 元 素 看 起 来 像 其 他 元 素 。 语 法 如 下 : 


appearance : normal | icon | window | button | menu | field ; 


取 值 说 明 如 下 。 

口 normal: 正常 地 修饰 元 素 。 

icon: 把 元 素 修饰 得 像 一 个 图 标 。 
window: 把 元 素 修饰 得 像 一 个 视窗 。 
button: 把 元 素 修饰 得 像 一 个 按钮 。 
menu: 把 元 素 修饰 得 像 菜单 。 
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口 field: 把 元 素 修 饰 得 像 一 个 输入 框 。 


各 提示 : 需要 说 明 的 是 ， 使 用 appearance 属性 定义 的 元 素 ， 仍 然 保 留 元 素 的 功能 ， 仅 在 外 
观 上 做 了 改变 。 由 于 受到 元 素 本 身 功能 的 局 限 ， 不 是 每 一 个 元 素 都 可 以 任意 被 修 
饰 ， 但 是 恰当 地 修饰 大 部 分 是 可 行 的 。 


2. 示例 介绍 


下 面 的 示例 使 用 appearance 属性 ， 把 页 面 元 素 均 伪 装 成 按钮 。 
【示例 4-18】 伪装 的 按钮 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 伪 装 的 按钮 </title> 
<style type="text/css"> 
div, a, input { 


-webkit-appearance:button; /* 修饰 为 按钮 风格 */ 
-moz-appearance:button; /* 修饰 为 按钮 风格 */ 
appearance:button; /* 修饰 为 按钮 风格 */ 
} 
#nav { 


width:240px; 
padding:10px; 
height:130px; 
font-size:14px; 
. 
#nav a { 
font-size:12px; 
padding:0 10px; 
line-height:22px; 
text-decoration:none; 
Color:#00F; 
} 
</style> 
</head> 
<body> 
<div id="nav"> 
<input type="text" name="key"” value=" 关 键 词 "> 
<a href="#"> 搜 索 </a><br> 
热门 关键 词 : <br> 
<a href="#">CSS 3</a><a href="#">HTML5</a><a href="#"> 移 动 开 发 </a></div> 
</body> 
</html> 


运行 结果 如 图 4-24 所 示 。 

代码 分 析 : 在 示例 4-18 中 ， 没 有 添加 任何 按钮 元 素 ， 把 标签 div、a 和 input 均 修饰 为 
按钮 风格 。 在 如 图 4-24 所 示 的 显示 效果 中 ， 所 有 的 链接 被 修饰 成 按钮 风格 ，div 标签 和 输 
入 框 也 是 按钮 风格 ， 呈 现 出 来 的 按钮 都 是 伪装 的 。 
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4.3.4 


| css3 | rwu5 | 移动 开发 


图 4-24 轮廓 在 文本 框 内 部 


为 元 素 添 加 内 容 一 一 content 属性 


如 果 要 给 元 素 插入 内 容 ， 很 少 有 人 会 想到 使 用 CSS 样式 表 来 实现 。 在 CSS 中 ， 可 以 
使 用 content 属性 为 元 素 添加 内 容 ， 这 已 然 蔡 代 了 JavaScript 的 部 分 功能 。 

content 属性 早 在 CSS 2.1 的 时 候 就 被 引入 了 ,可 以 使 用 :before 及 :after 伪 元 素 生 成 内 容 ， 
CSS 3 仍然 引用 了 该 属性 ， 并 且 已 经 获得 广泛 的 支持 。 


1. 参数 说 明 


content : none | normal | <string> | counter (<counter>) | attr(<attribute>) 
LOTIW<arl>)ITEnheEaE > 


取 值 说 明 如 下 。 


有 有 提 旭日 日 刁 


口 


none: 如 果 有 指定 的 添加 内 容 ， 则 设置 为 空 。 

normal: 默认 值 ， 不 做 任何 指定 或 改动 。 

<string>: 指定 添加 的 文本 内 容 。 

counter (<counter>) : 指定 一 个 计数 器 作为 添加 内 容 。 

attr (<attribute>) : 把 选择 的 元 素 的 属性 值 作 为 添加 内 容 ，<attribute> 为 元 素 的 属性 。 
url (<url>) : 指定 一 个 外 部 资源 作为 添加 内 容 ， 如 图 像 、 音 频 、 视 频 等 ，<url> 为 
一 个 网 络 地 址 。 

inherit: 表示 继承 父 元 素 。 


content 属性 的 使 用 ， 更 多 地 是 与 CSS 选择 器 结合 使 用 。 
2. 示例 介绍 


【示例 4-19】 给 元 素 添加 内 容 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 添 加 content 内 容 </title> 
<style type="text/css"> 


“0s 
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#nav { 
margin:20px auto; 
width:200px; 
border:lpx solid #f£90; 
padding:20px; 
line-height:22px; 
font-size:18px; 

} 

#nav a { 
display:block; 
font-size:12px; 
line-height:22px; 
color:#00F; 

} 

/* 筛选 链接 地 址 ， 添 加 不 同 的 内 容 */ 

a[lhref$=html] :before { 
content: "网页: "; /* 指定 添加 内 容 */ 

} 

a[href$=jpg] :before { 
content: "图 片 : "; 

j: 

a[href$=doc] :before { 


content : "Word 文档 : "; /* 指定 添加 内 容 */ 
3 
a[href$=pdf] :before { 

content:"PDF 文档 : "; /* 指定 添加 内 容 */ 
;| 
</style> 
</head> 
<body> 


<div id="nav"> 
<a href="Code4-17.html"> 登 录 页 面 </a> 
<a href="images/IL5.jpg"> 杭 州 风 光 </a> 
<a href="images/test.doc"> 参 考 资料 </a> 
<a href="images/ Pattern.pdf"> 设 计 模式 培训 </a> 
</div> 
</body> 
</html> 


运行 结果 如 图 4-25 所 示 。 


轿 末 content 内 容 
€ 3 CQym?t0 


图 4-25 ”使 用 content 属性 给 元 素 添加 内 容 


= 
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代码 分 析 : 在 示例 4-19 中 ,通过 筛选 链接 地 址 ， 为 不 同 的 链接 添加 不 同 的 内 容 。 如 图 
4-25 所 示 ， 每 个 链接 中 的 冒号 及 其 左边 的 部 分 ， 为 添加 的 内 容 。 

也 可 以 使 用 content 属性 值 url (<ur>) 添加 图 片 内 容 ， 调 整 部 分 样式 表 内 容 如 下 : 

<style type="text/css"> 

/* 筛选 链接 地 址 ， 添 加 不 同 的 内 容 */ 


a[href$=html] :after { 
content:url (images/web.png); 


| 
a[href$=jpg] :after { 


Content:url (images/img.png) /* 指定 图 片 作 为 添加 内 容 */ 
a[href$=doc]:after { 

content:url (images/doc.png); /* 指定 图 片 作为 添加 内 容 */ 
} 
a[href$=pdf] :after { 

content:url (images/pdf .png); /* 指定 图 片 作为 添加 内 容 */ 
. 
</style> 


运行 结果 如 图 4-26 所 示 。 


添加 eontent 内 容 
€ 3C Gyrm740:8 


图 4-26 指定 图 片 作为 添加 内 容 


也 可 以 使 用 content 属性 值 attr 〈<attribute>) 把 元 素 属 性 的 属性 值 作 为 添加 内 容 ， 调 
整 部 分 样式 表 内 容 如 下 : 


<style type="text/css"> 


/* 添加 内 容 */ 
a:after { 
content:attr (href); /* 元 素 a 的 href 属性 值 作为 添加 内 容 */ 

} 

</style> 

运行 结果 如 图 4-27 所 示 。 

也 可 以 使 用 content 属性 值 counter (<counter >) ， 生 成 项 目 符号 作为 添加 内 容 。 这 其 
中 还 需要 借助 CSS 的 另 一 属性 counter-increment (这 里 不 详细 讲解 ) ， 来 定义 计数 器 。 调 
整 样式 表 如 下 : 


ws 
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辐 寺 加 content 内 容 
€ 3 CC Oyr40:8080/hc/Char 


登录 页 面 Code4-17. html 


杭州 风光 images/IL5. jpg 


参考 资料 images/test,. doc 
设 ; 培训 p jf 


图 4-27 元 素 的 属性 值 作为 添加 内 容 


<style type="text/css"> 
#nav { 
margin:5px auto; 
width:200px; 
border:1lpx solid #f£90; 
padding:20px; 
line-height:22px; 
font-size:18px; 
} 
#nav a { 
display:block; 
font-size:12px; 
line-height:22px; 
color:#00F; 
counter-increment:mycounter; /* 定义 计数 器 */ 
下 
a:before { 
Content: counter (mycounter)"."; /* 生成 项 目 符号 */ 


} 
</style> 
运行 结果 如 图 4-28 所 示 。 


添加 content 内 容 
€ FC Oyrmr40:8 


图 4-28 生成 项 目 符号 作为 添加 内 容 


ke 
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4.3.5 实验 室 : 设计 一 个 省 份 选择 盘 


在 网 页 中 通常 会 有 选择 省 份 的 下 拉 列 表 ， 列 出 了 所 有 的 省 份 供用 户 选 择 。 但 因 列 表 较 
长 ， 选 择 起 来 极 不 友好 ， 比 较 好 的 方案 就 是 设计 一 个 省 份 选择 盘 。 下 面 我 们 用 前 面 学 过 的 
知识 ， 做 一 个 实验 性 的 示例 : 设计 一 个 省 份 选择 盘 。 


1. 案例 简介 


本 节 介绍 的 案例 ， 只 有 一 个 选择 盘 的 区 域 ， 用 户 可 以 调整 尺寸 ; 选择 盘 内 部 包含 31 
个 省 份 的 链接 ， 每 个 链接 都 有 一 个 编号 ， 当 链接 获取 焦点 时 ， 会 有 一 个 外 轮廓 线 ， 当 鼠标 
经 过 链接 时 ， 链 接 被 修饰 为 按钮 风格 。 页 面 效果 如 图 4-29 所 示 ， 展 示 了 链接 获取 焦点 的 样 
式 和 鼠标 经 过 的 样式 。 下 面 就 逐步 设计 该 网 页 。 


[3 
和 Ormr740:508 


1. 北京 2. 上 海 3. 天 津 5. 安徽 


6. 福建 7. 匡 肃 8. 广 东 10. 贵州 


11. 海南 | 12. 河北 15 湖南 


16. 吉林 17. 江苏 18. 江西 20. 宁夏 

21. 青海 。 22. 山东 ”23. 山西 25. 四 川 

26. 西 赢 。 27. 新 疆 28. 云南 30. 黑龙 江 
31. 内 蒙古 


yewT40 8030he/Chapt er4/cote4-Test hial# 


图 4-29 省 份 选择 盘 界 面 效果 


2. 设计 网 页 元 素 


页 面 元 素 的 设计 比较 简单 ， 一 个 div 元 素 作 为 选择 盘 ， 内 部 包含 31 个 省 份 的 链接 。 
【示例 4-20】 设计 一 个 省 份 选择 盘 。 

<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 省 份 选择 盘 </title> 

</head> 

<body> 

<div id="disk"> <a href="#"> 北 京 </a> <a href="#"> 上 海 </a> <a href="#"> 天 津 
</a> <a href="#"> 重 庆 </a> <a href="#"> 安 徽 </a> <a href="#"> 福 建 </a> <a 
href="#"> 甘 肃 </a> <a href="#"> 广 东 </a> <a href="#"> 广 西 </a> <a href="#"> 贵 
州 </a> <a href="#"> 海 南 </a> <a href="#"> 河 北 </a> <a href="#"> 河 南 </a> <a 
href="#"> 湖 北 </a> <a href="#"> 湖 南 </a> <a href="#"> 吉 林 </a> <a href="#"> 江 
苏 </a> <a href="#"> 江 西 </a> <a href="#"> 辽 宁 </a> <a href="#"> 宁 夏 </a> <a 
href="#"> 青 海 </a> <a href="#"> 山 东 </a> <a href="#"> 山 西 </a> <a href="#"> 陕 
西 </a> <a href="#"> 四 川 </a> <a href="#"> 西 藏 </a> <a href="#"> 新 疆 </a> <a 
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自 适 应 布局 。 


想 及 其 相关 属性 ， 


href="#" > 云南 </a> <a href="#"> 浙 江 </a><a href="#"> 黑 龙 江 </a> <a href="#"> 内 


蒙古 </a> </div> 
</body> 
</html> 


3. 样式 表 设计 
设计 选择 盘 允 许 


户 改变 尺寸 。 


<style type="text/css"> 

#disk { 
width:340px; 
padding:10px; 
resize:both; 
overflow:auto; 
border:1lpx solid #f90; 
line-height:22px; 

本 

#disk a { 
display:block; 
float:left; 
width:60px; 
text-align:center; 
text-decoration:none; 
font-size:12px; 
line-height:20px; 
margin:3px; 
border:1lpx solid #ccc; 
background-color:#e4e4e4; 
counter-increment:mycounter; 

) 

#disk a:focus { 
outline:2px solid #fc6; 
outline-offset:2px; 

} 

#disk a:hover { 
-webkit-appearance:button; 
-moz-appearance:button; 
appearance:button; 

} 

#disk a:before { 
content:counter (mycounter)"."; 

. 

</style> 


至 此 ， 完 成 了 省 份 选择 盘 的 页 面 设计 ， 运 行 


44 小 


本 章 讲解 了 CSS 3 新 增 的 盒 


布局 和 界面 设计 方面 的 
盒子 阴影 是 比较 常用 的 属性 ， 也 是 本 章 的 重点 。 


/* 允许 改变 尺寸 */ 
/* 溢出 处 理 */ 


/* 显示 为 块 结构 */ 
/* 左 浮动 */ 


/* 定义 计数 器 */ 


链接 焦点 设置 外 轮廓 */ 


鼠标 经 过 链接 ， 修 饰 为 按钮 风格 */ 
鼠标 经 过 链接 ， 修 饰 为 按钮 风格 */ 
鼠标 经 过 链接 ， 修 饰 为 按钮 风格 */ 


/* 生成 并 添加 项 目 符号 */ 


结果 如 图 4-29 所 示 。 


一 些 属性 。 


内 部 链接 元 素 浮动 显示 ， 可 以 随 选 择 盘 的 尺寸 改变 而 
内 部 链接 通过 样式 表 添 加 项 目 符号 。 


点 讲解 了 盒 布 局 的 思 


其 中 使 布 局 的 思想 比较 


a 
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难以 理解 , 与 传统 的 布局 方法 有 很 大 出 入 。 给 元 素 添加 内 容 有 极 大 的 灵活 性 ， 也 不 宜 理解 ， 
需要 读者 多 体会 。 
下 一 章 将 介绍 CSS 3 新 增 的 另外 一 种 布局 一 一 多 列 布局 。 


4.5 习 题 


【习题 1】 如 何 开启 盒 布 局 ? 
【习题 2】 请 选择 可 用 于 盒 布 局 的 属性 〈 多 选 ) : 


A. box-orient B. box-direction C. box-ordinal-group 

D. box-shadow E. box-sizing F. box-flex 

【习题 3】 请 选择 box-shadow 属性 的 正确 设置 〈 多 选 ) : 

A. box-shadow:Spx Spx Spx #333; B. box-shadow:-5px -5px Spx #00f:; 
C. box-shadow:0 0 0 Spx #333; D. box-shadow: inset Spx Spx Spx #333; 
【习题 4】 下 面 的 选项 中 ， 哪 些 属 于 box-sizing 属性 的 值 (多 选 ) : 

A. content-box B. box C. border-box 

D. inherit E. padding-box F. margin-box 

【习题 5】 下 面 的 选项 中 ， 哪 个 属性 是 用 于 定义 外 轮廓 线 的 〈 多 选 ) : 

A. resize B. outline C. appearance 

D. content E. outline-offset F. outline-style 
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在 我 们 经 常 阅读 的 报纸 或 杂志 中 ， 通 常 一 个 版 面 会 分 成 多 个 列 进行 排版 。 在 传统 的 网 
页 设计 中 ， 会 使 用 表格 布局 或 浮动 布局 等 方式 ， 但 总 会 遇 到 同样 的 错位 问题 ， 也 因此 需要 
反复 地 调整 ， 但 仍然 不 够 完美 。 针 对 这 种 情况 ,你 是 否 在 期 待 一 种 更 好 的 解决 方法 ? CSS 3 
提供 了 新 的 多 列 布局 ， 可 以 直接 定义 列 数 、 列 宽 等 ， 也 可 以 定义 列 与 列 之 间 的 间距 、 间 隔 
线 等 ， 还 可 以 定义 栏目 跨 列 和 栏目 高 度 等 。 本 章 将 详细 讲解 多 列 布局 的 基本 属性 及 其 使 用 
方法 。 


5.1 多 列 布局 基础 


CSS 3 新 增 的 多 列 布局 ， 可 以 从 多 个 方面 去 设置 ， 多 列 的 列 数 、 每 列 的 宽度 、 列 与 列 
之 间 的 距离 、 列 与 列 之 间 的 间隔 线 样式 、 跨 多 列 设置 和 列 的 高 度 设置 等 ， 下 面 逐步 讲解 。 


5.1.1 多 列 属性 columns 

CSS 3 新 增 的 columns 属性 ， 用 于 快速 定义 多 列 的 列 数目 和 每 列 的 宽度 。 基 于 webkit 
内 核 的 替代 私有 属性 是 -webkit-columns，gecko 内 核 的 浏览 器 暂 不 支持 。 

1. 参数 说 明 

columns 属性 的 语法 如 下 : 


columns:<column-width> || <column-count> ; 

取 值 说 明 如 下 。 

口 <column-width>: 定义 每 列 的 宽度 。 

口 <column-count>: 定义 多 列 的 列 数 。 

在 实际 布局 的 时 候 ， 所 定义 的 多 列 的 列 数 是 最 大 列 数 。 当 外 围 宽度 不 足 时 ， 多 列 的 列 
会 适当 减少 ， 而 每 列 的 宽度 会 自 适应 宽度 ， 填 满 整个 范围 区 域 。 

2. 示例 介绍 


【示例 5-1】 把 一 篇 文章 分 成 多 列 显示 。 


<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 
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<title> 多 列 属性 columns</title> 

<style type="text/css"> 

body { 
border:1lpx solid #f£90; 
padding:10px; 
-webkit-columns:200px 3; 
columns:200px 3; 


/* 设计 为 3 列 ， 每 列 宽度 为 200px */ 

/* 设计 为 3 列 ， 每 列 宽度 为 200px */ 

| 

hl {font-size:24px;padding:5px 10px;background-color:#CCC;} 

h2 {font-size:14px;text-align:center;} 

p {text-indent:2em; font-size:12px;line-height :20px;} 

</style> 

</head> 

<body> 

<h1> 背 影 </h1> 

<h2> 朱 自 清 </h2> 

<p> 我 与 父亲 不 相 见 已 二 年 余 了 ， 我 最 不 能 忘记 的 是 他 的 背影 。</p> 

<p> 那 年 冬天 ， 祖 母 死 了 ， 父 亲 的 差 使 也 交 全 了 ， 正 是 祸 不 单行 的 日 子 。 我 从 北京 到 徐州 打算 跟着 
父亲 奔 丧 回 家 。 到 徐州 见 着 父亲 ， 看 见 满 院 狼 籍 的 东西 ， 又 想起 祖母 ， 不 禁 笋 黎 地 流下 眼泪 。 父 亲 
说 : " 事 已 如 此 ， 不 必 难 过 ， 好 在 天 无 绝 人 之 路 ! "</p> 

<p> 回 家 变卖 典 质 ， 父 亲 还 了 亏空 ， 又 借 钱 办 了 丧事 。 这 些 日 子 ， 家 中 光景 很 是 惨淡 ， 一 半 因 为 丧 
事 ， 一 半 因 为 父亲 赋闲 。 丧 事 完 毕 ， 父 亲 要 到 南京 谋事 ， 我 也 要 回 北京 念书 ， 我 们 便 同 行 。</P> 
<p> 到 南京 时 ， 有 朋友 约 去 游 往 ， 勾 留 了 一 日 ; 第 二 日 上 午 便 须 渡 江 到 浦口 ， 下 午 上 车 北 去 。 父 亲 
因为 事 忙 ， 本 已 说 定 不 送 我 ， 叫 旅馆 里 一 个 熟识 的 茶 房 陪 我 同 去 。 他 再 三 嘱 只 茶 房 ， 甚 是 仔细 。 但 
他 终于 不 放心 ， 怕 茶 房 不 妥 帖 ， 颇 路 路 了 一 会 。 其 实 我 那 年 已 二 十 岁 ， 北 京 已 来 往 过 两 三 次 ， 是 没 
有 什么 要 紧 的 了 。 他 跨 踏 了 一 会 ， 终 于 决定 还 是 自己 送 我 去 。 我 两 三 回 劝 他 不 必 去 ; 他 只 说 : "不 要 
紧 ， 他 们 去 不 好 ! "</p> 

<Pp> 我 们 过 了 江 ， 进 了 车 站 。 我 买 票 ， 他 忙 着 照看 行李 。 行 李 太 多 了 ， 得 向 脚 夫 行 些小 费 才 可 过 去 。 
他 便 又 忙 着 和 他 们 讲价 钱 。 我 那 时 真是 聪明 过 分 ， 总 觉 他 说 话 不 大 漂亮 ， 非 自己 插嘴 不 可 ， 但 他 终 
于 讲 定 了 价钱 ; 就 送 我 上 车 。 他 给 我 拣 定 了 靠 车 门 的 一 张 椅 子 ; 我 将 他 给 我 做 的 紫 毛 大 衣 铺 好 座位 。 
他 嘱 我 路 上 小 心 ， 夜 里 要 警醒 些 ， 不 要 受凉 。 又 嘱托 茶 房 好 好 照应 我 。 我 心里 暗 笑 他 的 迁 ; 他 们 只 
认得 钱 ， 托 他 们 只 是 白 托 ! 而 且 我 这 样 大 年 纪 的 人 ， 难 道 还 不 能 料理 自己 么 ? 唉 ， 我 现在 想 想 ， 邦 
时 真是 太 聪 明了 ! </p> 

</body> 

</html> 


运行 结果 如 图 5-1 所 示 。 


国 2 有 属性 colwas 
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售 钱 办 了 记事 。 这 些 日 子 ， 冢 中 光 果 很 


* 128°* 


背影 


朱自清 


我 与 父亲 不 相 见 已 二 年 余 了 ,我 最 
不 能 忘记 的 是 他 的 背影 。 


那 年 冬天 ， 祖 母 死 7 了， 父亲 的 差 合 
也 交 邱 了 ， 正 是 祸 不 单行 的 日 子 。 我 从 
北京 到 入 州 打算 跟着 父亲 奔 训 回 家 。 到 
徐州 见 痢 父 亲 ， 在 见 汪 院 狼 乱 的 东西 ， 
又 起 起 祖 苹 ， 不 禁 守 散 地 闹 下 轨 诅 。 父 
条 说 :“ 事 己 如 此 ， 不 必 难 过 ， 好 在 天 
无 绝 人 之 路 !“ 


回 家 变卖 奥 质 ， 父 亲 还 了 亏 诗 ; 又 


是 修 淡 ， 一 半 因 为 伦 事 ， 一 半 因 为 父亲 
赋闲 。 走 事 序 毕 ， 父 亲 要 到 南京 谋事 ,， 
我 也 要 回 北京 念书 ， 我 们 便 同 行 。 


到 圳 京 时 ， 有 朋友 均 去 游 赤 ， 勾 留 
了 一 日 : 第 二 日 上 午 便 须 次 江 到 交口， 
下 午 上 计 北 去 。 父 亲 因为 事 忙 ， 本 已 说 
定 不 送 我 ， 叫 旅馆 里 一 个 熟识 的 茶 房 陪 
我 同 主 。 他 再 三 呢 只 革 房 
恰 他 终于 不 放心 ， 怕 某 房 


我 们 过 了 江 ， 进 本 车 站 。 我 买 轩 
必 忙 者 照看 行李 、 行 地 太 多 了 ， 得 向 其 
夫 行 些小 费 才 可 过 去 。 他 便 又 忙 着 和 他 
们 讲价 钱 。 我 那 对 真是 聊 明 过 分 ， 名 党 
他 说 话 不 大 漂亮 ， 非 香 己 插嘴 不 可 ,但 
他 终于 讲 定 了 价 绕 ， 就 送 我 上 车 . 他 给 
我 拒 定 了 靠 车 站 的 一 张 情 子 ; 我 将 他 给 


我 做 的 繁 毛 大 衣 铺 好 座位 。 他 嘱 我 路 上 
小 心 ， 查 里 要 位 睛 些 ， 不 要 受 京 。 又 旺 
托 葵 房 好 好 晴 应 我 。 我 心里 障 笑 他 的 


二 迁 ; 侧 们 只 认得 厂 ， 托 他 们 只 是 白 托 ! 


送 我 去 。 我 两 三 目 劝 他 不 必 去 ; 他 只 
说 :“ 不 女 紧 ,他们 去 不 好 !“ 


而 且 我 这 样 大 年 纪 的 人 ， 难 道 还 不 能 料 
理 自己 么 ? 唉 ， 我 现在 想 想 ， 那 时 真是 
太 联 明了 ! 


图 5-1 


-篇 文章 分 成 多 列 的 显示 效果 
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代码 分 析 : 在 示例 5-1 中 ， 仅 仅 设置 了 columns 属性 ， 即 实现 了 分 列 布局 ， 且 每 列 的 
高 度 尽 可 能 一 致 ， 如 图 5-1 所 示 。 

如 果 缩 小 浏览 器 窗 体 的 宽度 ， 则 文章 会 变 成 2 列 或 者 1 列 ， 每 列 的 高 度 尽 可 能 一 致 ， 
而 每 列 的 宽度 会 自 适 应 分 配 ， 不 一 定 是 200px。 


5.1.2 ” 列 宽 属性 column-width 


CSS 3 新 增 的 column-width 属性 ， 用 于 定义 多 列 布局 中 每 列 的 宽度 。 基 于 webkit 内 核 
的 替代 私有 属性 是 -webkitcolumn-width ， 基 于 gecko 内 核 的 替代 私有 属性 是 


-moz-column-width 。 
1. 参数 说 明 
column-width 属性 的 语法 如 下 : 
column-width : auto | <length> ; 
取 值 说 明 如 下 。 
口 auto: 列 的 宽度 由 浏览 器 决定 。 
口 <length>: 直接 指定 列 的 宽度 ， 该 值 是 由 浮 点 数 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 
以 为 负 值 。 


2. 示例 介绍 


在 示例 5-1 的 基础 上 ， 调 整 body 标签 的 样式 表 ， 设 置 column-width 属性 。 
【示例 $-2】 仅 设 置 列 的 宽度 。 


<style type="text/css"> 
body { 
border:1lpx solid #f90; 
padding:10px; 
-webkit-column-width:200px; /* 每 列 宽度 为 200px */ 
-moz-column-width:200px; /* 每 列 宽度 为 200px */ 
column-width:200px; /* 每 列 宽度 为 200px */ 


} 

hl {font-size:24px;padding:5px 10px;background-color:#CCC;} 
h2 {font-size:14px;text-align:center;} 

p {text-indent:2em; font-size:12px;line-height:20px;} 
</style> 


运行 结果 如 图 5-1、 图 5-2 所 示 。 
代码 分 析 : 在 示例 5-2 中 ， 仅 设置 了 每 列 的 宽度 。 当 窗口 的 大 小 改变 时 ， 列 数 会 及 时 
调整 ， 列 数 不 固 定 。 


5.1.3 列 数 属性 column-count 


CSS 3 新 增 的 column-count 属性 用 于 定义 多 列 布局 中 的 列 数目 。 基 于 webkit 内 核 的 蔡 
代 私 有 属性 是 -webkit-column-count, 基于 gecko 内 核 的 替代 私有 属性 是 -moz-column-count。 


ss 
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人 辐 多 列 属性 colwmns 
© | © yrr740:3080/hc/Chapter5 


家 入 


背影 


朱自清 


我 与 父亲 不 相 见 已 二 年 余 了 ， 我 最 不 能 忘记 的 
是 他 的 背影 。 


那 年 冬天 ， 祖 母 死 了 ， 父 亲 的 差 使 也 交 知 了 ， 
正 是 祸 不 单行 的 日 子 。 我 从 北京 到 徐州 打算 跟着 父 
亲 奎 霄 回 家 。 到 徐州 见 着 父亲 ， 看 见 满 院 狼 籍 的 东 
西 ， 又 想起 祖母 ， 不 禁 艇 租 地 流下 眼泪 。 父 亲 
说 :“ 事 已 如 此 ， 不 必 难 过 ， 好 在 天 无 绝 人 之 路 !“ 


回 家 变卖 典 质 ， 父 亲 还 了 亏空 ， 又 借 钱 办 了 让 
事 。 这 些 日 子 ， 家 中 光景 很 是 惨淡 ， 一 半 因 为 形 
事 ， 一 半 因为 父亲 赋闲 。 霄 事 充 毕 ， 父 亲 要 到 南京 
谋事 ， 我 也 要 回 北京 含 书 ， 我 们 便 同 行 。 


为 事 忙 ， 本 已 说 定 不 送 我 ， 叫 旅馆 里 一 个 熟识 的 茶 
房 陪 我 同 去 。 他 再 三 旷 哇 茶 房 ， 甚 是 全 细 。 但 他 终 
于 不 放心 ， 怕 荣 房 不 妇 帖 ， 颇 蹲 距 了 一 会 。 其 实 我 
那 年 已 二 十 岁 ， 北 京 已 来 往 过 两 三 次 ， 是 没有 什么 
要 紧 的 了 。 他 跨 焉 了 一 会 ， 终 于 决定 还 是 自己 送 我 
去 。 我 两 三 回 劝 他 不 必 去 ;他 只 说 :“ 不 要 紧 , 他 
们 去 不 好 !“ 


我 们 过 了 江 ， 进 了 车 站 。 我 买 标 ， 他 忙 着 照看 
行李 。 行 李 太 多 了 ， 得 向 肢 夫 行 些 小 费 才 可 过 去 。 
他 便 又 忙 着 和 他 们 讲价 钱 。 我 那 时 真是 聪明 过 分 
总 觉 他 说 话 不 大 漂亮 ， 非 自己 插嘴 不 可 ， 但 他 终于 
讲 定 了 价钱 ， 就 送 我 上 车 。 他 给 我 护 定 了 讲 车 门 的 
一 张 棒子， 我 将 他 给 我 做 的 紫 毛 大 衣 铺 好 座位 。 他 
嘱 我 路 上 小 心 ， 夜 里 要 会 醒 些 ， 不 要 受 售 。 又 嘱托 
菜 房 好 好 照应 我 。 我 心里 暗 笑 他 的 迁 ; 他 们 只 认得 
钱 ， 托 他 们 只 是 白 托 ! 而 且 我 这 样 大 年 纪 的 人 ， 难 


图 5-2 缩小 窗口 宽度 变 成 两 列 


1. 参数 说 明 


column-count 属性 的 语法 如 下 : 


column-count : 


auto | <number> ; 


取 值 说 明 如 下 。 
口 auto: 列 的 数目 由 其 他 属性 决定 ， 如 column-width。 
口 <number>: 直接 指定 列 的 数目 ， 取 值 为 大 于 0 的 整数 ， 决 定 了 多 列 的 最 大 列 数 。 


2. 示例 介绍 


在 示例 5-1 的 基础 上 ， 调 整 body 标签 的 样式 表 ， 设 置 column-count 属性 。 


【示例 5-3】 仅 设 置 列 的 数目 。 


<style type="text/css"> 
body { 


hp 


border:lpx solid #f90; 
padding:10px; 
-webkit-column-count:3; 
-moz-column-count:3; 
column-count:3; 


/* 指定 列 的 数目 */ 
/* 指定 列 的 数目 */ 
/* 指定 列 的 数目 */ 


hl {font-size:24px;padding:5px 10px;background-color:#CCC;} 
h2 {font-size:14px;text-align:center;} 

p {text-indent:2em; font-size:12px;line-height:20px;} 
</style> 


运行 结果 如 图 5-1、 图 5-3 所 示 。 


代码 分 析 : 在 示例 5-3 中 ， 仅 设置 了 多 列 的 列 数目 。 当 窗口 的 大 小 改变 时 ， 


时 调整 ， 列 数 固定 不 变 。 


“Ns 
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O 多 列 属性 colmns 
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背影 
朱自清 


我 与 父亲 不 相 见 已 二 年 余 
了 ， 我 最 不 能 忘记 的 是 他 的 背 
影 。 


那 年 冬天 ， 祖 母 死 了 ， 父 亲 
的 差 使 也 交 务 了 ， 正 是 祸 不 单行 
的 日 子 。 我 从 北京 到 徐州 打算 跟 
着 父亲 奔 户 回 家 。 到 徐州 见 着 父 
亲 ， 看 见 满 院 狼 籍 的 东西 ， 又 想 
起 祖母 ， 不 禁 租 后 地 流下 眼泪 。 
父亲 说 :“ 事 已 如 此 ， 不 必 难 
过 ， 好 在 天 无 绝 人 之 路 !“ 


子 ， 家 中 光景 很 是 惨淡 ， 一 半 因 
为 形 事 ， 一 半 因为 父亲 赋闲 。 让 
事 充 毕 ， 父 亲 要 到 南京 谋事 ， 我 
也 要 回 北京 念书 ， 我 们 便 同 行 。 


到 南京 时 ， 有 朋友 约 去 游 
壮 ， 义 留 了 一 日 ; 第 二 日 上 午 便 
须 渡 江 到 满口 ， 下 午 上 车 北 去 。 
父亲 因为 事 忙 ， 本 已 说 定 不 送 
我 ， 叫 旅馆 里 一 个 熟识 的 茶 房 陪 
我 同 去 。 他 再 三 嘱 只 茶 房 ， 甚 是 
仔细 。 但 他 终于 不 放心 ， 怕 菜 房 
不 妥 帖 ， 颇 踏 路 了 一 会 。 其 实 我 
那 年 已 二 十 岁 ， 北 京 已 来 往 过 两 
三 次 ， 是 没有 什么 要 紧 的 了 。 他 
路 路 了 一 会 ， 终 于 决定 还 是 自己 


我 们 过 了 江 ， 进 了 车 站 。 我 
买 票 ， 他 忙 着 照看 行李 。 行 李 太 
多 了 ， 得 向 脚 夫 行 些 小 费 才 可 过 
去 .他 便 又 忙 着 和 他 们 讲价 钱 。 
我 那 时 真是 聪明 过 分 ， 总 觉 他 说 
话 不 大 漂亮 ， 非 自己 插嘴 不 可 ， 
但 他 终于 讲 定 了 价钱 ， 就 送 我 上 
车 .他 给 我 护 定 了 潮 车 门 的 一 张 
椅子 ;我 将 他 给 我 做 的 繁 毛 大 衣 
铺 好 座位 。 他 嘱 我 路 上 小 心 ， 夜 
里 要 千 恒 些 ， 不 要 受凉 。 又 旷 托 
茶 房 好 好 照应 我 。 我 心里 暗 笑 他 
的 迁 ， 他 们 只 认得 钱 ， 托 他 们 只 
是 白 托 ! 而 且 我 这 样 大 年 纪 的 
人 ， 难 道 还 不 能 料理 自己 么 ? 


送 我 去 。 我 两 三 回 劝 他 不 必 去 


吗 ， 我 现在 想 想 ， 那 时 真是 太 有 陪 


图 5-3 ”缩小 窗口 仍然 保持 3 列 


5.1.4 列 间距 属性 column-gap 


CSS 3 新 增 的 column-gap 属性 ， 用 于 定义 多 列 布局 中 列 与 列 之 间 的 距离 。 基 于 webkit 
内 核 的 替代 私有 属性 是 -webkitcolumn-gap ， 基 于 gecko 内 核 的 奉 代 私有 属性 是 


-moz-column-gap。 
1. 参数 说 明 


column-gap 属性 的 语法 如 下 : 


column-gap : normal | <length> ; 


取 值 说 明 如 下 。 
口 normal: 默认 值 ， 由 浏览 器 默认 的 列 间 距 ， 一 般 是 lem。 
口 <length>: 指定 列 与 列 之 间 的 距离 ， 由 浮 点 数字 和 单位 标识 符 组 成 ， 不 可 为 负 值 。 


2. 示例 介绍 


在 多 列 布局 中 ， 设 置 body 标签 的 column-gap 属性 ， 调 整 为 较 宽松 的 列 间距 。 
【示例 5-4】 较 宽松 的 列 间距 。 


<!DOCTYPEHTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 宽 松 的 列 间 距 </title> 
<style type="text/css"> 
body { 

border:1lpx solid #f90; 


= 
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} 


padding:10px; 


-webkit-column-count:37 


-moz-column-count:37 


column-count :37 


-webkit-column-gap:3em; 


-moz-column-gap: 3em; 


column-gap: 3em; 


/* 指定 列 的 数目 */ 
/* 指定 列 的 数目 */ 
/* 指定 列 的 数目 */ 
/* 指定 列 间距 为 3em */ 
/* 指定 列 间 距 为 3em */ 
/* 指定 列 间 距 为 3em */ 


hl {font-size:24px;padding:5px 10px;background-color:#CCC;} 
h2 {font-size:14px;text-align:center;} 
p {text-indent:2em; font-size:12px;line-height:20px;} 
</style> 
<body> 
<h1> 背 影 </h1> 
<h2> 朱 自 清 </h2> 
<P>…</P> 
</body> 
</html> 


运行 结果 如 图 5-4 所 示 。 


[SET 
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背影 


朱自清 


我 与 父亲 不 相 见 已 二 年 余 了 ， 我 
最 不 胰 忘 记 的 是 他 的 背影 。 


于 生 科 天， 祖母 死 了 ， 父 亲 的 差 
全 也 交 基 了 ， 正 是 禄 不 单行 的 日 子 。 
我 从 北京 到 徐州 打 复 跟 着 父亲 圭 绷 回 
家 。 到 徐州 见 着 父亲 ， 看 见 消 际 浪 箱 
的 来 西 ， 又 株 起 祖母 ， 不 禁 繁 租 地 流 
下 眼泪 。 父 亲 说 :“ 事 已 如 此 ， 不 必 难 
过 ， 好 在 天 无 织 人 之 路 !“ 


回 家 交 卖 典 质 ， 父 亲 还 了 亏空 
又 僧 钱 办 了 背 事 。 这 些 日 子 ， 家 中 光 


录 很 是 惨淡 ， 一 半 因 为 丧事 ， 一 半 固 
为 父亲 几 用 。 霄 事 充 毕 ， 父 亲 要 到 机 
京 谋事 ， 我 也 要 回 北京 念书 ， 我 们 便 
同行 。 


到 南京 时 ， 有 朋友 约 去 游 进 , 匆 
留 了 一 日 ， 第 二 日 上 午 恒 须 装 江 到 庙 
口 ， 下午 上 车 北 去 。 父 亲 因 为 事 忙 , 
本 已 说 定 不 并 我 ， 叫 旅馆 里 一 个 熟识 
的 芝 房 陪 我 同 去 他 
甚 是 剑 细 。 但 他 此 寺 不 放 
不 受 帖 ， 颇 踊 研 了 一 会 。 其 实 我 那 年 
已 二 十 岁 ， 北 京 已 来 往 过 两 三 次 ， 是 
没 丰 什么 要 紧 的 了 。 他 峙 政 了 一 会 ， 
终于 决定 还 是 自己 送 我 去 。 我 两 三 回 
动作 不 必 去 ， 他 只 说 :“ 不 要 紧 ， 他 们 
去 不 好 ! ” 


我 们 过 了 江 ， 进 了 车 站 。 我 买 
票 ， 他 忙 着 照看 行李 。 行 率 太 多 了 ， 
得 向 脚尖 行 些 小 费 才 可 过 去 。 化 便 嗓 
忙 荐 和 他 们 讲价 钱 。 我 那 时 真是 菩 明 
过 分 ， 总 觉 他 说 话 不 大 源 充 ， 间 自己 
插嘴 不 可 ， 但 化 终于 堵 定 了 价钱 ， 就 
送 我 上 车 ， 他 给 我 护 定 了 夷 车 门 的 
张 椅子 ， 我 将 他 给 我 微 的 紫 毛 大 衣 铺 
好 座位 。 他 嘱 我 路 上 小 心 ， 夜 里 要 藻 
特 些 ， 不 要 受凉 。 双 嘱托 荣 房 好 好 照 
应 我 。 我 心里 暗 笑 他 的 还 :他们 只 认 
得 钱 ， 托 他 们 只 是 白 托 ! 而 且 我 这 样 
大 年 纪 的 人 ， 滩 道 还 不 能 料理 自己 
么 ? 唉 ， 我 现在 想 想 ， 那 时 真是 太 陪 
明了 ! 


图 5-4 ”较为 宽松 的 列 间 距 


代码 分 析 : 在 示例 5-4 中 ， 在 3 列 的 基础 上 ， 设 置 了 column-gap 值 为 3em， 
间 的 距离 增加 了 很 多 ， 变 得 较为 宽松 了 。 


5.1.5 ”定义 列 分 隔 线 一 一 column-rule 属性 


CSS 3 新 增 的 column-rule 属性 ， 在 多 列 布局 中 ,月 


列 与 列 之 


日 于 定义 列 与 列 之 间 的 分 隔 线 。 基 于 


webkit 内 核 的 替代 私有 属性 是 -webkit-column-rule， 基 于 gecko 内 核 的 奉 代 私有 属性 是 


-moz-column-rule。 


1. 参数 说 明 


column-rule 属性 的 语法 如 下 : 


"Ds 
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column-rule : [column-rule-width] || [column-rule-style]l || [column-rule— 
CoLorl 3 


取 值 说 明 如 下 。 

口 <column-rule-width>: 定义 分 隔 线 的 宽度 。 

口 <column-rule-style>: 定义 分 隔 线 的 样式 风格 。 
口 <column-rule-color>: 定义 分 隔 线 的 颜色 。 
2. 


派生 的 子 属性 


下 面 介 绍 关 于 派生 的 子 属性 。 
口 column-rule 属性 是 一 个 复合 的 属性 ， 包 含 3 个 子 属性 ， 分 别 定义 分 隔 线 的 宽度 、 
样式 风格 和 颜色 。 

口 column-rule-width 子 属性 : 定义 分 阳线 宽度 , 为 任意 包含 单位 的 长 度 , 不 可 为 负 值 。 
口 column-rule-style 子 属性 : 定义 分 隔 线 样式 风格 ， 取 值 范围 与 border-style 相同 , 包 
括 none、dotted、dashed、solid、double、groove、ridge、inset、onutset、inherit。 

口 column-rule-color 子 属性 : 定义 分 隔 线 的 颜色 ,为 任意 用 于 CSS 的 颜色 值 ， 也 包括 
半 透 明 颜色 。 
column-rule 属性 及 其 子 属性 的 使 用 方法 ， 与 border 属性 及 其 子 属 性 相同 。 对 于 webkit 
内 核 的 浏览 器 ，column-rule 属性 及 其 子 属性 需要 增加 前 级 “-webkit-”; 对 于 gecko 内 核 的 
浏览 器 ，column-rule 属性 及 其 子 属性 需要 增加 前 级 “-moz-”。 


3. 示例 介绍 


在 多 列 布局 中 ， 设 置 列 与 列 之 间 的 分 阳线 。 
【示例 S-$】 列 与 列 之 间 的 分 隔 线 。 
<!DOCTYPEHTML> 


<html> 

<head> 

<meta charset="utf-8"> 

<title> 分 隔 线 </title> 

<style type="text/css"> 

body { 
border:1lpx solid #f907 
padding:10px; 
-webkit-column-count:37 /* 指定 列 的 数目 */ 
-moz-column-count:3; /* 指定 列 的 数目 */ 
column-count:3; /* 指定 列 的 数目 */ 
-webkit-column-rule:1lpx solid #666; /* 指定 列 间距 为 3em */ 
-moz-column-rule:1px solid #666; /* 指定 列 间 距 为 3em */ 
column-rule:1lpx solid #666; /* 指定 列 间距 为 3em */ 


l 

hl {font-size:24px;padding:5px 10px;background-color:#CCC;} 
h2 {font-size:14px;text-align:center;} 

p {text-indent:2em; font-size:12px;line-height:20px;} 
</style> 

<body> 

<h1> 背 影 </h1> 

<h2> 朱 自 清 </h2> 

<p>...</p> 


i 
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</body> 
</html> 


运行 结果 如 图 5-5 所 示 。 


代码 分 析 : 在 示例 5-5 中 ， 仍 然 定义 了 3 列 。 我 们 直接 通过 复合 属性 column-rule， 设 
置 了 分 隔 线 的 宽度 、 样 式 和 颜色 。 
分 隔 线 的 样式 如 同 边 框 样式 一 样 可 以 调整 ， 


[STR 


© Oymwr40:308 


背影 
朱自清 


我 与 父亲 不 相 见 已 二 年 余 了 ， 我 最 
不 能 忘记 的 是 他 的 背影 。 


那 年 冬天 ， 祖 母 死 了 ， 父 亲 的 差 使 
也 交 务 了 ， 正 是 祸 不 单行 的 日 子 。 我 从 
北京 到 徐州 打算 跟着 父亲 着 度 回 察 。 到 
述 州 见 着 父亲 ， 看 见 消 院 萎 粮 的 东西 ， 
又 想起 祖母 ， 不 禁 委 衣 地 流下 眼泪 。 父 
亲 说 :“ 事 已 如 此 ， 不 必 难 过 ， 好 在 天 无 
绝 人 之 路 !“ 


回 家 变卖 典 质 ， 父 亲 还 了 亏空 ， 又 


借 钱 办 了 记事 ， 这 些 日 子 ， 家 中 光景 很 
是 收效 ， 一 半 因 为 民事 ， 一 半 因为 父亲 
赋闲 。 翅 事 充 毕 ， 信 亲 要 到 南京 谋事 ， 
我 也 要 回 北京 仿 书 ， 我 们 便 同 行 。 


到 南京 时 ， 有 了 朋友 约 去 游 广 ， 匆 留 
了 一 日 ; 第 二 日 上 午 便 须 渡 江 到 浦口 ， 
下 午 上 车 北 去 ,父亲 因为 事 忙 ， 本 已 说 
定 不 送 我 ， 叫 旅馆 里 一 个 熟识 的 茶 房 陪 
我 同 去 。 他 再 三 路 咱 某 房 ， 甚 是 仔 绝 - 
但 他 绕 于 不 放心 ， 怕 茶 房 不 显 帖 ， 颇 路 
路 了 一 会 。 其 夹 我 那 年 已 二 十 岁 ， 北 京 
已 来 往 过 两 三 次 ， 是 没有 什么 要紧 的 
了 。 他 跨 路 了 一 会 ， 仇 于 决定 还 是 自己 
送 我 去 。 我 两 三 回 劲 他 不 必 去 ;他 只 
说 :“ 不 要 紧 ， 他 们 去 不 好 ! “ 


我 们 过 了 江 ， 进 了 车 站 。 我 买 票 ， 
他 从 着 照看 行 棱 。 行李 太 多 了 ， 得 向 胸 
夫 行 些小 费 才 可 过 去 。 他 便 又 忙 着 和 他 
们 潮 价钱。 我 那 时 真是 腾 明 过 分 ， 总 觉 
他 说 话 不 大 水 壹 ， 非 自己 插嘴 不 可 ， 但 
他 兴 于 讲 定 了 价钱 ; 就 送 我 上 车 。 他 给 
我 冻 定 了 靠 车 门 的 一 张 柄 子 ; 我 将 他 给 
我 数 的 紫 毛 大 衣 铺 好 座位 。 他 嘱 我 路 上 
小 心 ， 夜 星 要 禾 醒 毕 ， 不 要 受 京 ， 又 号 
托 茶 房 好 好 照应 我 ， 我 心 星 暗 笑 他 的 
迁 :他 们 只 认得 钱 ， 托 他 们 只 是 白 托 ! 
而 且 我 这 样 大 年 纪 的 人 ， 难 道 还 不 能 料 
理 自己 么 ? 唉 ， 我 观 在 想 想 ， 那 时 真是 
太 验 明了 ! 


式 表 如 下 : 
<style type="text/css"> 


body { 
border:1lpx solid #f90; 


padding:10px; 


图 5-5 列 与 列 的 分 隔 线 


显示 效果 如 图 5-5 所 示 。 


当然 也 


-webkit-column-count:3; 


-moz-column-count:3; 
column-count:3; 


-webkit-column-rule-width:1px; 
-moz-column-rule-width:1px; 
column-rule-width:1px; 
-webkit-column-rule-style:dashed; 
-moz-column-rule-style:dashed; 
column-rule-style:dashed; 
-webkit-column-rule-color:#f00: 


-moz-column-rule-color:#f£00; 
column-rule-color:#f£00; 
hl {font-size:24px;padding:5px 10px;background-color:#CCC;} 


h2 {font-size:14px;text-align:center;} 
p {text-indent:2em; font-size:12px;line-height:20px;} 
</style> 


运行 结果 如 图 5-6 所 示 。 
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可 以 使 用 子 属性 进行 设置 。 调 整 样 


/* 指定 列 的 数目 */ 

/* 指定 列 的 数目 */ 

/* 指定 列 的 数目 */ 

/* 设置 分 隔 线 的 宽度 */ 
/* 设置 分 隔 线 的 宽度 */ 
/* 设置 分 隔 线 的 宽度 */ 
/* 设置 分 隔 线 的 样式 */ 
/* 设置 分 隔 线 的 样式 */ 
/* 设置 分 隔 线 的 样式 */ 
/* 设置 分 隔 线 的 颜色 */ 
/* 设置 分 隔 线 的 颜色 */ 
/* 设置 分 隔 线 的 颜色 */} 
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Er 
加 [Ormrto-anan/rcycnaptcssfooacs-Tesrhh 立 六 


彰 影 借 斌 办 了 普 事 。 这 些 日 子 ， 训 中 光 员 很 我 们 过 了 江 ， 关 了 车 让。 我 舌 么 ， 
Bb 李 太 多 了 ， 得 向 胸 
3 。 他 便 又 信者 和 他 
朱自清 和 ， - 我 开 时 真是 蜀 明 过 分 ， 总 觉 
我 与 父亲 不 相 见 已 二 年 未 了 ， 我 最 pa 
不 能 忘记 的 是 他 的 背 昧 。 
我 证 了 种 门 的 


形 年 所 天， 宜生 死 了， 父亲 的 差 全 Cs 我 信 的 此 毛 大 胡 铺 节 应 位 。 位 紧 我 路 上 
也 交 姑 了 ， 正 是 神 不 兰 村 的 日 子 . 我 从 小 心 ， 遍 里 对 等 条 此 ， 不 要 受 席 。 又 紧 
北京 到 徐州 条 得 中 着 父亲 寿 均 回 家 。 到 并 匠 房 好 好 并 应 我 。 我 心里 晤 笑 他 的 
徐州 见 交 父系， 看见 满 院 浪 短 的 计 西 ， ¥ 运 ; 托 他 们 只 是 白 托 : 
又 棵 起 本 三 ， 不 柴 药 鸭 地 流下 眼泪 - 父 
床 说 :“ 事 已 如 此 ， 不 攻 验 过， 好 在 天 无 
统 人 之 路 !“ 


回 家 变卖 伍 质 ， 信 亲 还 了 亏空 ; 又 


图 5-6 列 与 列 的 虚线 分 阳线 


5.1.6 ”定义 横 跨 所 有 列 一 一 column-span 属性 


CSS 3 新 增 的 column-span 属性 ,在 多 列 布局 中 ,用 于 定义 元 素 跨 列 显示 。 基 于 webkit 
内 核 的 替代 私有 属性 是 -webkit-rcolumn-span，gecko 内 核 的 浏览 器 暂 不 支持 该 属性 。 


1. 参数 说 明 
column-span 属性 的 语法 如 下 : 


column-span :1 | all ; 


取 值 说 明 如 下 。 
口 1: 默认 值 ， 元 素 在 一 列 中 显示 
口 all: 元 素 横 跨 所 有 列 显示 。 


2. 示例 介绍 


在 多 列 布局 中 ， 设 置 标题 内 容 跨 列 显示 。 
【示例 5-6】 标题 跨 列 显示 。 


<!DOCTYPEHTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 标 题 跨 列 显示 </title> 
<style type="text/css"> 
body { 
border:1lpx solid #f£90; 
padding:10px; 


-webkit-column-count:37 /* 指定 列 的 数目 */ 
-moz-column-count:37 /* 指定 列 的 数目 */ 
column-count:37 /* 指定 列 的 数目 */ 
-webkit-column-rule:1px solid #666; /* 设置 分 隔 线 */ 
-moz-column-rule:1px solid #666; /* 设置 分 隔 线 */ 


ss 


第 2 篇 基于 CSS 3 的 Web 界面 设计 实战 


h1,h2{ 
-webkit-column-span:all; 


1 


column-span:all; 


column-rule:1lpx solid #666; 


/* 设置 分 隔 线 */ 


/* 设置 横 跨 所 有 列 显 示 */ 
/* 设置 横 跨 所 有 列 显示 */ 


hl {font-size:24px; margin:0;padding:5px 10px;background-color:#CCC;} 
h2 {font-size:14px;text-align:center;} 
p {text-indent:2em;font-size:12px;line-height:20px;} </style> 


</head> 
<body> 
<h1> 背 影 </h1> 


<h2> 朱 自 清 </h2> 


<P>…</P> 
</body> 
</html> 


运行 结果 如 图 5- 


代码 分 析 : 


7 所 示 。 


Or 未 


C Gymrto:anfr 


背影 


我 与 父亲 不 相 见 已 二 年 余 了 
我 景 不 能 忘记 的 是 他 的 疹 影 、 


那 年 冬天 ， 祖 母 死 了 ,父亲 的 
莽 使 也 交 知 了 ， 正 是 祝 不 单行 的 日 
子 。 我 从 北京 到 徐州 打算 距 着 父亲 
拜 形 目 家 。 到 徐州 见 着 父亲 ， 看 见 
洞 院 狼 术 的 东西 ， 又 想起 相 否 ， 不 
装 租 第 他 流下 国 让 父亲 说 :“ 事 
已 如 此 ， 不 必 难 过 ， 好 在 天 无 绝 人 
之 路 !“ 


目 家 变 志 肉质 ， 父 亲 还 了 地 


” 空 ; 又 借 说 办 了 喜事。 这 此 6 子 ， 


图 5-7 


在 示例 5-6 中 ， 


其 跨 所 有 列 显示 ， 如 图 5-7 所 示 。 


5.2 ”实验 室 : 


朱自清 
北京 含 书 ， 我 们 便 同 行 。 


到 和 南京 时 ， 有 朋友 的 去 游 连 ， 
勾 留 了 一 日 ， 第 二 日 上 午 便 须 源 江 
到 浦口 ， 下 午 上 车 北 去 。 父 亲 因 为 
事 忙 ， 本 已 说 定 不 送 我 ， 叫 旅馆 里 
一 个 入 识 的 茶 房 内 我 同 去 。 他 再 三 
时 听 茶 房 ， 其 是 仔 组 

心 ， 怕 茶 房 不 妥 帖 ;版 踏 政 了 
十 岁 ， 北 京 已 
， 是 没有 什么 要 紧 的 


不 | 定 了 哮 车 门 的 一 张 椅子 :我 梅 全 给 


我 们 过 了 江 ， 进 了 车 站 ,我 天 
票 ， 他 忙 着 照看 行 这 。 行 李 太 字 
了 ， 得 向 脚尖 行 些小 费 才 可 过 去 。 
他 售 又 忙 荐 和 他 们 讲价 钱 ， 我 却 时 
真是 脱 明 过 分 ， 总 觉 他 说 话 不 大 漂 
带 ， 非 自己 所 路 不 可 ， 但 他 终于 讲 
定 了 价钱 ， 就 运 我 上 车 .他 给 我 抱 


我 向 的 繁 毛 大 衣 铺 好 座位 化 哪 我 
路 上 小 心 ， 青 里 要 客 奋 些 ， 不 要 且 
赢 。 又 昭 托 茶 房 好 好 照应 我 。 我 心 
里 障 笑 他 的 汪 ， 他 们 只 认得 贱 ， 托 
他 们 只 是 白 托 ! 而 且 我 这 样 大 年 纪 


跨 列 显示 的 标题 栏 


统一 为 标签 hl 和 h2 设置 了 column-span 属性 值 为 al， 使 


模仿 杂志 的 多 列 版 式 


在 制作 电子 杂志 的 时 候 ， 会 需要 界面 布局 看 起 来 像 杂志 ， 以 便 从 形象 上 与 常规 的 网 页 
有 所 区 别 。 传 统 的 技术 难点 就 是 多 列 版 式 的 布局 。 下 面 我 们 就 用 多 列 布局 来 实现 电子 杂志 


的 多 列 版 式 。 


1. 案例 简介 


本 节 
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绍 的 案例 ， 
列 显示 ， 文章 的 开篇 内 容 的 第 一 


一 个 简易 的 杂志 页 面 。 页 面 版 式 分 3 列 布局 ， 其 中 标题 横 跨 所 有 
个 字 设 置 为 突出 显示 ， 内 容 图 文 并 成 ， 实 现 仿 杂 志 效 果 。 
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案例 效果 图 如 图 5-8 所 示 。 


CSS3 的 发 展 轨迹 


作者 ;佚名 难 ， 不 次 怎样 ，web 浏 览 回 将 全 
面 支 持 C3S3 的 名 种 新 特点 ,一 
探索 已 经 开始 丁 。 针对 
览 嚣 ， 新 的 功能 是 逐渐 


样 zx 自从 CSS1 的 版 本 
之 后 ， 又 在 1998 年 5 月 发 布 了 


些 
不 | 

CSS2 版 本 ， 样 式 者 得 和 到 了 更 多 应 用 的 ， 仍 然 需 要 1-2 年 的 时 
间 


的 充实 - ， 每 一 个 新 的 模块 才 有 可 能 


Css2 0 提供 给 我 们 了 一 个 被 广安 应 用 , 
机 制 ， 让 程序 员 开发 时 可 以 不 CSS3 连 择 器 CSS3 将 给 我 带 来 哪些 新 的 
考虑 显示 和 界面 就 可 以 制作 才 ， 影响 
单 和 界面 ， 显 示 问 题 可 由 美工 呈 - 
或 是 程序 员 后 期 青 来 编写 相应 es 首先 ， 我 们 希望 ， 这 是 个 
CSS2. 0 样式 来 解决 。 不 过 由 。 和 S53 中 正确 的 方式 ，CSS3 将 完全 向 后 


图 5-8 模仿 杂志 的 多 列 版 式 


2. 设计 网 页 元 素 


网 页 内 容 分 三 类 : 标题 、 作 者 和 文章 内 容 。 
【示例 5-7】 模仿 杂志 的 多 列 版 式 。 


<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 模 仿 杂 志 的 多 列 版 式 </title> 
</head> 

<body> 

<h1>CSS 3 的 发 展 轨迹 </h1> 

<h2> 作 者 : 佚名 </h2> 

<p class="first"> 样 式 表 自 从 CSS1 的 版 本 之 后 ..</P> 
<p>...</p> 

</body> 

</html> 


省 去 了 元 长 的 文字 内 容 。 
3. 样式 表 设计 


在 body 标签 中 设置 页 面 内 容 使 用 多 列 布局 ， 分 三 列 显示 。 标 题 模 跨 所 有 栏 显 示 ， 突 
文章 的 第 一 个 字 。 
<style type="text/css"> 
body { 
border:1lpx solid #f£90; 
padding:10px; 


Ee 


-webkit-column-count:3; /* 指定 列 的 数目 */ 
-moz-column-count:3; /* 指定 列 的 数目 */ 
column-count:3; /* 指定 列 的 数目 */ 
上 k 
:1 


kk 
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-webkit-column-span:all; /* 设置 模 跨 所 有 列 显示 */ 
-moz-column-span:all; /* 设置 横 跨 所 有 列 显示 */ 
column-span:all; /* 设置 横 跨 所 有 列 显示 */ 


font-size:24px; 

margin:0; 

padding:5px 10px; 
background-color:#e4e4e47 
text-align:center; 


font-size:14px; 
text-align:center; 


} 

pf 
text-indent:2em; 
font-size:12px; 
line-height:20px; 

本 

.first:first-letter { 
font-size:24px; /* 突出 第 一 个 字 */ 
font-weight:bold; 

} 

sb { 
font-weight:bold; 

} 

</style> 


至 此 ， 完 成 了 仿 杂志 的 多 列 版 式 设计 ， 运 行 结果 如 图 5-8 所 示 。 


5.3 小 结 


本 章 主要 讲解 了 CSS 3 多 列 布局 的 应 用 。 重 点 讲解 了 多 列 布局 中 列 宽 和 列 数 的 定义 ， 
以 及 列 间距 里 和 列 间 分 阳线 的 使 用 方法 。 本 章 的 难点 在 于 多 列 布局 的 思路 与 传统 的 布局 有 
很 大 不 同 ， 需 要 一 个 思维 上 的 转变 ， 用 心 领 会 ， 其 实 不 难 。 下 一 章 将 介绍 CSS 3 支持 的 革 
命 性 的 功能 一 一 动画 和 渐变 。 


5.4 习 是 


【习题 1】 简 要 列举 一 下 CSS 3 中 有 哪儿 种 布局 方式 。 

【习题 2】 在 多 列 布局 中 ， 如 果 定 义 列 与 列 之 间 的 分 隔 线 ， 应 该 使 用 哪个 属性 ( 单 选 》: 

A. column-width B. column-count C. column-gap 

D. column-rule E. column-fill F. column-span 

【习题 3】 编 写 一 个 页 面 ， 把 一 篇 文章 的 内 容 分 成 三 列 显示 ， 并 在 列 与 列 之 间 设 置 分 
隔 线 。 
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在 网 页 设计 中 ， 适 当地 使 用 动画 或 者 渐变 ， 可 以 把 网 页 设计 得 更 加 生动 和 友好 。 在 传 
统 的 设计 中 ， 会 借助 Flash 或 者 JavaScript 来 实现 动画 ， 借 助 图 片 实 现 渐变 ， 而 CSS 仅仅 
是 静态 地 表现 元 素 的 效果 。 不 过 ，CSS 3 将 改变 我 们 的 思维 方式 ， 因 为 动画 和 渐变 也 可 以 
直接 用 CSS 来 实现 了 。 这 些 革命 性 的 改变 ， 使 得 CSS 具有 更 强大 的 可 能 性 。 本 章 就 详细 
地 讲解 CSS 3 的 2D 动画 和 渐变 。 


6.1 CSS 3 变形 基础 


变形 是 实现 动画 的 前 提 。 本 节 将 详细 讲解 CSS 3 的 2D 变形 基础 (3D 变形 还 未 获得 广 
泛 的 支持 ) 。 


6.1.1 元 素 的 变形 


transform 属性 


CSS 3 新 增 的 transform 属性 ， 可 用 于 元 素 的 变形 ， 实 现 元 素 的 旋转 、 缩 放 、 移 动 、 倾 
和 斜 等 变形 效果 。 基 于 webkit 内 核 的 替代 私有 属性 是 -webkit-transform; 基于 gecko 内 核 的 替 
代 私有 属性 是 -moz-transform; 基于 presto 内 核 的 奉 代 私有 属性 是 -o-transform; 正 浏览 器 的 
替代 私有 属性 是 -ms-transform。transform 属性 的 语法 如 下 : 


transform :none | <transform-functions> ; 


取 值 说 明 如 下 。 
口 none: 默认 值 ， 不 设置 元 素 变 形 。 
口 <transform-functions>: 设置 一 个 或 多 个 变形 函数 。 变 形 函 数 包括 旋转 rotate0、 缩 
放 scale0、 移 动 tanslate0、 倾 斜 skew0、 和 矩阵 变形 matrix0 等 。 设置 多 个 变形 函数 
时 ， 用 空格 间隔 。 
元 素 在 变形 的 过 程 中 ， 仅 元 素 的 显示 效果 变形 ， 实 际 尺寸 并 不 会 因为 变形 而 改变 。 所 
以 元 素 变形 后 ， 可 能 会 超出 原 有 的 限定 边界 ， 但 不 会 影响 自身 尺寸 及 其 他 元 素 的 布局 。 


6.1.2 旋转 


rotate() 消 数 用 于 定义 元 素 在 二 维 空间 的 旋转 。 函 数 的 使 用 语法 如 下 : 
rotate (<angle>) 


参数 说 明 : <angle> 表 示 旋 转 的 角度 ,为 带 有 和 角度 单位 标识 符 的 数值 ， 角 度 单位 是 deg。 
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值 为 正 时 ， 表 示 顺 时 针 旋 转 : 值 为 负 时 ， 表 示 逆 时 针 旋转 。 
【示例 6-1】 旋转 的 菜单 。 
下 面 演示 一 个 旋转 菜单 的 效果 。 鼠 标 经 过 时 ， 菜 单 会 旋转 一 定 角 


<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 旋 转 元 素 </title> 

<style type="text/css"> 

i 
margin-top:30px; 
list-style:none; 
line-height:25px; 
font-family:Arial; 
font-weight:bold; 


肖 


width:120px; 
float:left; 
margin:2px; 
border:1lpx solid #ccc; 
background-color:#e4e4e4; 
text-align:left; 

3 

li:hover { 
background-color:#999; /* 深 灰 色 */ 

a { 
display:block; 
padding:5px 10px; 
Color:#333; 
text-decoration:none; 

} 

a:hover { 
background-color:#f90; 
Color:#FFF; 
/* 变形 方式 : 旋转 */ 


-webkit-transform: rotate (30deg); /* 兼容 webkit 内 核 */ 
-moz-transform: rotate (30deg) : /* 兼容 gecko 内 核 */ 
-o-transform:rotate (30deg) : /* 兼容 presto 内 核 */ 
-ms-transform: rotate (30deg); /* 兼容 IE9 */ 
transform: rotate (30deg); /* 标准 写法 */ 

2 

</head> 

<body> 


<ul> 
<1i><a href="#">HTML5</a></1i> 
<li><a href="#">CSS 3</a></1i> 
<li><a href="#">jQuery</a></1i> 
<li><a href="#">Ajax</a></1i> 

</ul> 

</body> 

</html> 


运行 结果 如 图 6-1 所 示 。 
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辐 ij 元 来 
© | © my740:8080fhz/Chapter6/Code6-1.htal 


图 6-1 和 鼠标 经 过 时 ， 菜 单 旋 转 
代码 分 析 : 在 示例 6-1 中 ， 设 置 了 4 个 菜单 项 ， 为 了 对 比 变 形 的 差别 ， 均 保留 了 变形 


前 的 显示 区 域 。 在 鼠标 经 过 的 样式 中 ， 设 置 transform 属性 值 为 旋转 变形 函数 rotate()， 旋 


转角 


度 为 30deg， 示 例 运 行 结果 如 图 6-1 所 示 ， 鼠 标 经 过 菜单 时 ， 菜 单 顺 时 针 旋转 30deg。 


名 提示: 针对 transform 属性 ， 不 同 的 浏览 器 内 核 都 有 各 自 的 私有 替代 属性 。JIE 的 早期 版 


本 均 可 以 借助 滤 镜 实现 元 素 的 变形 。 


6.1.3 ”缩放 和 翻转 


scale0) 函 数 用 于 定义 元 素 在 二 维 空间 的 缩放 和 翻转 。 函 数 的 使 用 语法 如 下 : 


scale( <x> , <y> ) 


参数 说 明 如 下 。 

口 <x>: 表示 元 素 在 水 平方 向 上 的 缩放 倍数 。 

<y>: 表示 元 素 在 垂直 方向 上 的 缩放 倍数 。 

<x>、<y> 的 值 可 以 为 整数 、 负 数 、 小 数 。 当 取 值 的 绝对 值 大 于 1 时 ， 表 示 放 大 ; 
绝对 值 小 于 1 时 ， 表 示 缩 小 。 当 取 值 为 负数 时 ， 元 素 会 被 翻转 。 如 果 <y> 值 省 略 ， 
则 说 明 垂 直方 向 上 的 缩放 倍数 与 水 平方 向 上 的 缩放 倍数 相同 。 

【示例 6-2】 放大 的 菜单 。 

下 面 演示 一 个 放大 菜单 的 效果 。 鼠 标 经 过 时 ， 菜 单 会 放大 一 定 的 倍数 。 


<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 缩 放 元 素 </title> 

<style type="text/css"> 

ul { 
margin-top:30px; 
list-style:none; 
line-height:25px; 
font-family:Arial; 
font-weight:bold; 

类 

下 
width:120px; 
float:left; 
margin:2px; 
border:1lpx solid #ccc; 


口 
口 
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background-color:#e4e4e47 
text-align:left7 
|， 
li:hover{ 
background-color:#999; /* 深 灰 色 */ 
有 
af 
display:block; 
padding:5px 10px; 
Color:#333; 
text-decoration:none; 
1 
a:hover{ 
background-color:#f£90; 
Color:#FFF; 
/* 变形 方式 ;缩放 */ 
-webkit-transform:scale(1.5); /* 兼容 webkit 内 核 */ 
-moz-transform: scale (1.5); /* 兼容 gecko 内 核 */ 
-o-transform: scale (1.5); /* 兼容 presto 内 核 */ 
-ms-transform: scale (1.5); /* 兼容 IE9 */ 
transform: scale (1.5); /* 标准 写法 */ 
} 
</style> 
</head> 
<body> 
<ul> 
<li><a href="#">HTML5</a></1i> 
<1i><a href="#">CSS 3</a></1i> 
<1i><a href="#">jQuery</a></1i> 
<li><a href="#">Ajax</a></1i> 
</ul> 
</body> 
</html> 


运行 结果 如 图 6-2 所 示 。 


[SET 
© Ayr 


HTML5 CSS3 uery 


rewT40:6060/he/Chapter6/Code6-2 htal# 


图 6-2 ”鼠标 经 过 时 ， 菜 单 放大 


代码 分 析 : 在 示例 6-2 中 ,在 鼠标 经 过 的 样式 中 ， 设 置 transform 属性 值 为 缩放 变形 函 
数 scale0， 缩 放 值 为 1.5。 示 例 运行 结果 如 图 6-2 所 示 ， 鼠 标 经 过 菜单 时 ， 菜 单 会 放大 至 
1.5 倍 。 

如 前 面 scale0 函 数 语法 所 述 ， 缩 放 倍数 为 负数 ， 元 素 会 翻转 : 缩放 倍数 绝对 值 小 于 1， 
元 素 会 缩小 。 调 整 示例 6-2 中 的 变形 样式 如 下 : 


<style type="text/css"> 


/* 这 里 省 略 的 样式 不 变 */ 
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a:hovert{ 
background-color:#f90; 
Color:#FFF; 
/* 变形 方式 : 缩放 */ 
-webkit-transform:scale (0.8,-1.5) ; /* 兼容 webkit 内 核 */ 
-moz-transform: scale (0.8,-1.5); /* 兼容 gecko 内核 */ 


-o-transform:scale(0.8,-1.5) /* 兼容 presto 内 核 */ 
-ms-transform: scale (0.8,-1.5); /* 兼容 IE9 */ 
transform: scale (0.8,-1.5); /* 标准 写法 */ 

l: 

</style> 


运行 结果 如 图 6-3 所 示 。 


HTML5 C00 jQuery 


图 6-3 鼠标 经 过 时 ， 菜 单 缩放 


代码 分 析 : 在 调整 后 的 样式 表 中 ， 为 缩放 函数 scale0 分 别 设置 了 水 平方 向 上 的 缩放 倍 
数 和 垂直 方向 上 的 缩放 倍数 。 其 中 水 平 缩放 倍数 为 小 于 1 的 正 数 ， 表 现 为 元 素 会 在 水 平 向 
上 缩小 ， 垂 直 缩 放 倍数 为 负 值 且 绝对 值 大 于 1， 表 现 为 元 素 会 在 垂直 方向 上 ， 放 大 并 且 翻 
转 ， 效 果 如 图 6-3 所 示 。 


6.1.4 移动 


translate() 消 数 用 于 定义 元 素 在 二 维 空间 的 偏 移 。 函 数 的 使 用 语法 如 下 : 


translate (<dx>,<dy>) 


参数 说 明 如 下 。 

口 <dx>: 表示 元 素 在 水 平方 向 上 的 偏 移 距 离 。 

口 <dy>: 表示 元 素 在 垂直 方向 上 的 偏 移 距离 。 

口 <dx>、<dy> 的 值 为 带 有 长 度 单 位 标识 符 的 数值 ， 可 以 为 负 值 和 带 小 数 的 值 。 若 取 
值 大 于 0， 则 表示 向 右 或 向 下 偏 移 ; 若 取 值 小 于 0， 则 表示 向 左 或 向 上 偏 移 。 如 果 
<dy> 值 省 略 ， 则 说 明 垂 直方 向 上 的 偏 移 距离 默认 为 0。 

【示例 6-3】 移动 的 菜单 。 

下 面 演示 一 个 移动 菜单 的 效果 。 鼠 标 经 过 时 ， 菜 单 会 发 生 一 定 的 偏 移 。 

<!DOCTYPEHTML> 

<html> 

<head> 


<meta charset="utf-8"> 
<title> 移 动 元 素 </title> 
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<style type="text/css"> 
1 
margin-top:30px; 
list-style:none; 
line-height:25px; 
font-family:Arial; 
font-weight:bold; 


width:120px; 
float:left; 
margin:2px; 
border:1lpx solid #ccc; 
background-color:#e4e4e4; 
text-align:left; 

有 

li:hover { background-color:#999; } /* 

a 
display:block; 
padding:5px 10px; 
Color:#333; 
text-decoration:none; 

} 

a:hover { 
background-color:#f£90; 
Color:#FFF; 
/* 变形 方式 :移动 */ 


深 灰色 */ 


-webkit-transform: translate (10px, 5px); /* 兼容 webkit 内 核 */ 
-moz-transform: translate (10px, 5px); /* 兼容 gecko 内 核 */ 
-o-transform:translate (10px, 5px) ; /* 兼容 presto 内 核 */ 
-ms-transform: translate (10px, 5px); /* 兼容 IE9 */ 
transform: translate (10px, 5px) ; /* 标准 写法 */ 


</style> 

</head> 

<body> 

<ul> 
<1i><a href="#">HTML5</a></1i> 
<li><a href="#">CSS 3</a></1i> 
<1i><a href="#">jQuery</a></1i> 
<li><a href="#">Ajax</a></1i> 

</ul> 

</body> 

</html> 


运行 结果 如 图 6-4 所 示 。 


Ob 
© yrr740:808r 
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图 6-4 和 鼠标 经 过 时 ， 菜 单 移动 一 定 的 距离 
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代码 分 析 : 在 示例 6-3 中 ， 为 了 对 比 变形 的 差别 ， 均 保留 菜单 项 变形 前 的 显示 区 域 。 
在 鼠标 经 过 的 样式 中 , 设置 transform 属性 值 为 移动 变形 函数 translate0, 水 平方 向 移动 10px， 
垂直 方向 移动 Spx， 示 例 运行 结果 如 图 6-4 所 示 ， 鼠 标 经 过 菜单 时 ， 菜 单 会 移动 一 定 的 距离 。 

如 前 面 translateO 函 数 语法 所 述 ， 若 取 值 小 于 0， 则 表示 向 左 或 向 上 偏 移 ， 如 果 第 二 个 
参数 值 省 略 ， 则 说 明 垂 直方 向 上 的 偏 移 距离 默认 为 0。 调整 示例 6-3 中 的 变形 样式 如 下 : 


<style type="text/css"> 


. /* 这 里 省 略 的 样式 不 变 */ 


a:hovert{ 


background-color:#f£90; 
Color:#FFF; 


/* 变形 方式 : 缩放 */ 
-webkit-transform: translate(-10px);  /* 兼容 webkit 内 核 */ 


-moz-transform: translate(-10Px) /* 兼容 gecko 内核 */ 
-o-transform: translate(-10px); /* 兼容 presto 内 核 */ 
-ms-transform: translate(-10px); /* 兼容 IE9 */ 
transform: translate(-10px); /* 标准 写法 */ 

} 

</style> 

运行 结果 如 图 6-5 所 示 。 


图 6-5 鼠标 经 过 时 ， 菜 单 缩放 


代码 分 析 : 在 调整 后 的 样式 表 中 ， 为 移动 函数 translate0 仅 设置 了 一 个 负 值 ， 表 现 为 元 


素 会 在 水 平 向 上 向 左 偏 移 ， 垂 直方 向 上 默认 为 0， 即 不 偏 移 。 运 行 效果 如 图 6-5 所 示 。 
6.1.5 ”倾斜 


skew0) 函 数 用 于 定义 元 素 在 二 维 空间 的 倾斜 变形 。 函 数 的 使 用 语法 如 下 : 


skew (<angleX>,<angleY>) 


参数 说 明 如 下 。 


口 
口 
口 


【示例 6.4】 倾斜 的 菜单 


<angleX>: 表示 元 素 在 空间 x 轴 上 的 倾斜 角度 。 

<angleY>: 表示 元 素 在 空间 轴 上 的 倾斜 角度 。 

<angleX>、<angleY> 的 值 为 带 有 角度 单位 标识 符 的 数值 ， 角 度 单位 是 deg。 值 为 正 
时 ， 表 示 顺 时 针 旋 转 ， 值 为 负 时 ， 表 示 逆 时 针 旋 转 。 如 果 <angleY> 值 省 略 ， 则 说 
明 垂 直方 向 上 的 倾斜 角度 默认 为 0deg。 


下 面 演示 一 个 倾斜 菜单 的 效果 。 鼠 标 经 过 时 ， 菜 单 倾斜 。 


“ld 
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<!DOCTYPEHTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 倾 斜 元 素 </title> 
<style type="text/css"> 
ul { 
margin-top:30px; 
list-style:none; 
line-height:25px; 
font-family:Arial; 
font-weight:bold; 
E 
中 | 
width:120px; 
float:left; 
margin:2px; 
border:1lpx solid #ccc; 
background-color:#e4e4e4; 
text-align:left; 
]} 
li:hover { background-color:#999; 
CE 
display:block; 
padding:5px 10px; 
Color:#333; 
text-decoration:none; 
} 
a:hover { 
background-color:#f90; 
Color:#FFF; 
/* 变形 方式 : 倾斜 */ 
-webkit-transform: skew(-30deg) : 
-moz-transform: skew (-30deg); 
-o-transform: skew (-30deg); 
-ms-transform: skew (-30deg); 
transform: skew (-30deg); 
} 
</style> 
</head> 
<body> 
<ul> 
<1i><a href="#">HTML5</a></1i> 
<li><a href="#">CSS 3</a></1i> 
<1i><a href="#">jQuery</a></1i> 
<li><a href="#">Ajax</a></1i> 
</ul> 
</body> 
</html> 


运行 结果 如 图 6-6 所 示 。 


/* 深 灰色 */ 


/* 兼容 webkit 内 核 */ 
/* 兼容 gecko 内 核 */ 
/* 兼容 presto 内 核 */ 
/* 兼容 IE9 */ 
/* 标准 写法 */ 


代码 分 析 : 在 示例 6-4 中 ,为 了 对 比 变形 的 差别 ， 仍 然 保留 菜单 项 变形 前 的 显示 区 域 。 


在 鼠标 经 过 的 档 


I 


EE 


单 会 倾斜 。 


式 中 , 设置 transform 属性 值 为 倾斜 变形 函数 skew0, 水 平方 向 倾斜 角度 为 
30deg， 午 直方 向 倾斜 角度 默认 为 0deg， 示 例 运行 结果 如 图 6-6 所 示 ， 上 鼠标 经 过 菜单 时 ， 菜 


根据 函数 skew0 的 语法 介绍 ， 也 可 以 设置 空间 y 轴 上 的 倾斜 角度 。 调 整 示例 6-4 中 的 


变形 样式 如 下 : 
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图 6-6 鼠标 经 过 时 ， 菜单 倾斜 


<style type="text/css"> 
. /* 这 里 省 略 的 样式 不 变 */ 
a:hover { 
background-color:#f90; 
Color:#FFF; 
/* 变形 方式 : 倾斜 */ 
-webkit-transform: skew(30deg,-10deg) ; /* 兼容 webkit 内 核 */ 


-moz-transform: skew (30deg, -10deg); /* 兼容 gecko 内 核 */ 

-o-transform: skew (30deg, -10deg); /* 兼容 presto 内 核 */ 

-ms-transform: skew (30deg, -10deg); /* 兼容 IE9 */ 

transform: skew (30deg, -10deg); /* 标准 写法 */ 
</style> 


运行 结果 如 图 6-7 所 示 。 


© | O ym740:8080/he/Chapter 


HTML5 YE 


图 6-7 ”鼠标 经 过 时 ， 菜 单 倾斜 


代码 分 析 : 在 调整 后 的 样式 表 中 ， 为 倾斜 函数 skewO 仅 设置 了 两 个 角度 值 ， 元 素 会 沿 
着 x 轴 和 >? 轴 表 现 为 不 同 程度 的 倾斜 。 运 行 效果 如 图 6-7 所 示 。 


6.1.6 ”和 矩阵 变形 


matrix0 函 数 用 于 定义 元 素 在 二 维 空间 的 矩阵 变形 。 函 数 的 使 用 语法 如 下 : 

matrix (<ml11>,<ml2>,<m21>,<m22>,<dx>,<dy>) 

参数 说 明 : 该 函数 中 的 6 个 参数 均 为 可 计算 的 数值 ， 组 成 一 个 变形 矩阵 ， 与 当前 元 素 
旧 的 参数 组 成 的 矩阵 进行 乘法 运算 ， 形 成 新 的 窍 阵 ， 元 素 的 参数 被 改变 。 该 变形 矩阵 的 形 
式 如 下 : 


1 mll m21 dxl 
ml2 mn22 ay 
I 0 1 
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关于 详细 的 和 矩阵 变形 原理 ， 需 要 掌握 矩阵 的 相关 知识 ， 具 体 可 参考 数学 及 图 形 学 相关 
资料 。 不 过 这 里 可 以 先 通过 几 个 特例 了 解 其 大 概 的 使 用 方法 。 前 面 已 经 讲 过 的 移动 、 缩 放 
和 旋转 这 些 变 换 相对 容易 理解 ， 其 实 都 可 看 作 和 矩阵 变形 的 特例 。 
口 旋转 rotate(A)， 相 当 于 矩阵 matrix(cosA,sinA,-sinA,cosA,0,0)。 
口 缩放 scale(sx , sy)， 相 当 于 和 矩阵 matrix(sx,0,0,sy,0,0)。 
口 移动 translate (dx, dy) ， 相 当 于 和 矩阵 matrix(1,0,0,1,dx,dy)。 
可 见 ， 使 用 矩阵 ， 可 以 使 元 素 的 变形 更 加 灵活 。 
【示例 6-$】 和 矩阵 变形 的 菜单 。 
下 面 我们 使 用 矩阵 演示 一 个 包含 多 种 变形 的 菜单 。 鼠 标 经 过 时 , 菜单 会 发 生 和 矩阵 变形 。 
<!DOCTYPEHTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 和 矩阵 变形 的 元 素 </title> 
<style type="text/css"> 
Lt 
margin-top:30px; 
list-style:none; 
line-height:25px; 
font-family:Arial; 
font-weight:bold; 


| 

| 
width:120px; 
float:left; 
margin:2px; 
border:1lpx solid #ccc; 
background-color:#e4e4e4; 
text-align:left; 

} 

li:hover { background-color:#999; } /* 深 灰 色 */ 

} 

ED 
display:block; 
padding:5px 10px; 
Color:#333; 
text-decoration:none; 

} 

a:hover { 
background-color:#f90; 
Color:#FFF; 
/* 变形 方式 ， 矩阵 变形 */ 
-webkit-transform:matrix(0.866,0.5,0.5,-0.866,10,10); 

/* 兼容 webkit 内 核 */ 
-moz-transform:matrix(0.866,0.5,0.5,-0.866,10,10); 

/* 兼容 gecko 内 核 */ 
-o-transform:matrix(0.866,0.5,0.5,-0.866,10,10);/* 兼容 Presto 内 核 */ 
-ms-transform:matrix(0.866,0.5,0.5,-0.866,10,10) ;/* 兼容 IE9 */ 
transform:matrix(0.866,0.5,0.5,-0.866,10,10) ; /* 标准 写法 */ 

; 
</style> 
</head> 
<body> 
<ul> 
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<li><a href="#">HTML5</a></1i> 
<li><a href="#">CSS 3</a></1i> 
<li><a href="#">jQuery</a></1i> 
<li><a href="#">Ajax</a></1i> 

</ul> 

</body> 

</html> 


运行 结果 如 图 6-8 所 示 。 


人 和 了 变形 元 素 
4 © | © yrv740:8080/hc/0! 


HTML5 
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图 6-8 ”鼠标 经 过 时 ， 菜 单 发 生 矩 阵 变形 


代码 分 析 : 在 示例 6-5 中 ,为 了 对 比 变形 的 差别 ， 仍 然 保留 菜单 项 变形 前 的 显示 区 域 。 
在 鼠标 经 过 的 样式 中 ， 设 置 transform 属性 值 为 矩阵 变形 函数 matrix0， 示 例 运行 结果 如 图 
6-8 所 示 ， 鼠 标 经 过 菜单 时 ， 菜 单 会 变形 ， 其 中 变形 的 效果 同时 包含 了 旋转 、 移 动 和 缩放 等 。 


6.1.7 同时 使 用 多 个 变形 函数 


矩阵 变形 固然 灵活 ， 但 是 不 直观 ， 也 不 容易 理解 。transform 属性 允许 同时 使 用 多 个 变 
形 函 数 ， tity 示例 6-5 中 所 实现 的 效果 ， 也 可 以 通过 同时 使 用 
多 个 变形 函数 来 实现 。 

【示例 6-6】 多 种 变形 的 菜单 。 

下 面 我 们 同时 使 用 旋转 、 移 动 和 缩放 来 实现 如 图 6-9 所 示 的 效果 。 


<!DOCTYPEHTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 多 种 变形 的 元 素 </title> 
<style type="text/css"> 
I 
margin-top:30px; 
list-style:none; 
line-height:25px; 
font-family:Arial; 
font-weight:bold; 
} 
Eh 
width:120px; 
float:left; 
margin:2px; 
border:1lpx solid #ccc; 
background-color:#e4e4ed4; 
text-align:left; 
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Tishover + 
background-color:#999; /* 深 灰 色 */ 
af 
display:block; 
padding:5px 10px; 
color:#3337 
text-decoration:none; 
| 
a:hover { 
background-color:#f90; 
Color:#FFF; 
/* 变形 方式 : 倾斜 */ 
-webkit-transform:translate (10px,10px) rotate(30deg) scale(1,-1); 
/* 兼容 webkit 内 核 */ 
-moz-transform:translate (10px,10px) rotate (30deg) scale(1,-1); 
/* 兼容 gecko 内 核 */ 
-o-transform:translate (10px,10px) rotate(30deg) scale(1,-1); 
/* 兼容 presto 内 核 */ 
-ms-transform: translate (10px,10px) rotate(30deg) scale(1,-1); 


/* 兼容 IE9 */ 
transform: translate (10px,10px) rotate(30deg) scale(1,-1); 

/* 标准 写法 */ 

} 

</style> 

</head> 

<body> 

<ul> 


<li><a href="#">HTML5</a></1i> 
<li><a href="#">CSS 3</a></1i> 
<1i><a href="#">jQuery</a></1i> 
<li><a href="#">Ajax</a></1i> 

</ul> 

</body> 

</html> 


运行 结果 如 图 6-9 所 示 。 
代码 分 析 : 在 示例 6-6 中 ,为 了 对 比 变形 的 差别 ,仍然 保留 菜单 项 变形 前 的 显示 区 域 。 


在 鼠标 经 过 的 样式 中 ， 设 置 transform 属性 值 为 3 个 变形 函数 ， 分 别 是 移动 translate 0、 旋 
转 rotate0 和 缩放 scale0。 其 中 3 个 函数 执行 的 顺序 依次 为 : 移动、 旋转 、 缩 放 。 示 例 运行 
结果 如 图 6-9 所 示 ， 鼠 标 划 过 菜单 会 产生 变形 。 


同样 是 使 用 多 个 变形 函数 ， 并 给 每 个 函数 赋 以 相同 的 参数 ， 如 果 顺 序 不 同 ， 变 形 的 结 


果 也 可 能 不 同 。 调 整 示例 6-6 中 的 变形 样式 如 下 : 


<style type="text/css"> 
/* 这 里 省 略 的 样式 不 变 */ 
a:hover { 
background-color:#f£f90; 
Color:#FFF; 


/* 变形 方式 : 倾斜 */ 
-webkit-transform: rotate (30deg) translate (10Px,10Px) scale(1,-1); 
/* 兼容 webkit 内 核 */ 
-moz-transform: rotate (30deg) translate (10Px,10Px) scale(1,-1) 
/* 兼容 gecko 内 核 */ 
-o-transform: rotate (30deg) translate (10Px,10Px) scale(1,-1); 
/* 兼容 presto 内 核 */ 
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-ms-transform: rotate(30deg) translate (10Px,10Px) s cale(1,-1); 
/* 兼容 IE9 */ 
transform: rotate(30deg) translate (10Px,10Px) scale(1,-1); 
/* 标准 写法 */ 


} 
</style> 


运行 结果 如 图 6-9 所 示 。 


图 6-9 运行 效果 图 


代码 分 析 : 调整 后 的 样式 ， 仅 变形 函数 的 顺序 调换 了 一 下 ，3 个 函数 的 执行 顺序 变 为 : 
旋转 、 移 动 、 缩 放 ， 就 产生 不 一 样 的 变形 结果 ， 如 图 6-9 所 示 ， 与 图 6-8 所 示 的 图 像 在 移 
动 方面 产生 了 偏差 。 因 为 在 旋转 执行 后 ， 旋 转 的 是 该 元 素 对 应 的 坐标 系统 ， 即 所 谓 的 水 平 
和 垂直 已 经 与 实际 的 水 平和 垂直 有 了 一 定 的 角度 ， 最 终 移动 的 结果 也 不 同 。 


6.1.8 定义 变形 原点 一 一 transform-origin 属性 


变形 属性 transform 默认 的 变形 原点 是 元 素 对 象 的 中 心 点 。CSS 3 提供 的 
transform-origin 属性 ， 可 用 于 指定 这 个 原点 的 位 置 ， 这 个 位 置 可 以 是 元 素 对 象 的 中 心 点 以 
外 的 任意 位 置 ， 进 一 步 增加 了 变形 的 灵活 性 。 


1. 参数 说 明 
定义 变形 原点 的 transform-origin 属性 ， 语 法 表示 如 下 : 


transform-origin :<x-axis> <y-axis> ; 


取 值 说 明 如 下 。 
口 <x-axis>: 定义 变形 原点 的 横 坐 标 位 置 , 默认 值 为 50%, 取 值 包括 left、 center、 right、 
百分比 值 、 长 度 值 。 
口 <y-axis>: 定义 变形 原点 的 纵 坐 标 位 置 ， 默 认 值 为 50%， 取 值 包括 top、middle、 
bottom、 百 分 比值 、 长 度 值 。 
其 中 ， 百 分 比 是 相对 于 元 素 对 象 的 宽度 和 高 度 而 言 的 ， 而 该 坐标 位 置 的 计算 ， 是 以 元 
素 的 左上 角 为 坐标 原点 进行 计算 的 。 
基于 webkit 内 核 的 蔡 代 私有 属性 是 -webkit-transform-origin; 基于 gecko 内 核 的 替代 私 
有 属性 是 -moz-transform-origin; 基于 presto 内 核 的 替代 私有 属性 是 -o-transform-origin; IE9 
浏览 器 的 替代 私有 属性 是 -ms-transform-origin。 


2. 示例 介绍 


【示例 6-7】 定义 菜单 旋转 的 原点 。 


ws 
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<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 定 义 菜单 旋转 的 原点 </title> 

<style type="text/css"> 

ul { 
margin-top:30px; 
list-style:none; 
line-height:25px; 
font-family:Arial; 
font-weight:bold; 


width:120px; 
float:left; 
margin:2px; 
border:1lpx solid #ccc; 
background-color:#e4e4e4; 
text-align:left; 

| 

Lida 
display:block; 
padding:5px 10px; 
Color:#333; 
text-decoration:none; 
/* 变形 原点 : 自 定义 */ 
-webkit-transform-origin:0 0; 
-moz-transform-origin:0 0; 
-o-transform-origin:0 0; 
-ms-transform-origin:0 0; 
transform-origin:0 0; 

} 

li:hover { 
background-color:#999; 

li:hover af{ 
background-color:#f90; 
Color:#FFF; 
/* 变形 方式 : 旋转 */ 
-webkit-transform: rotate(30deg); 
-moz-transform: rotate (30deg); 
-o-transform: rotate (30deg); 
-ms-transform: rotate (30deg) : 


transform: rotate (30deg); 

) 

</style> 

</head> 

<body> 

<ul> 
<1i><a href="#">HTML5</a></1i> 
<li><a href="#">CSS 3</a></1i> 
<li><a href="#">jQuery</a></1i> 
<li><a href="#">Ajax</a></1i> 

</ul> 

</body> 

</html> 


“Ds 


/* 兼容 webkit 内 核 */ 
/* 兼容 gecko 内 核 */ 
/* 兼容 presto 内 核 */ 
/* 兼容 IE9 */ 

/* 标准 写法 */ 


/* 深 灰色 */ 


/* 兼容 webkit 内 核 */ 
/* 兼容 gecko 内 核 */ 
/* 兼容 presto 内 核 */ 
/* 兼容 IE9 */ 
/* 标准 写法 */ 
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运行 结果 如 图 6-10 所 示 。 


© Oyrmr0:3080/he/Chapters/Codes-7. htal 


HTML5 < jQuery Ajax 


图 6-10 鼠标 经 过 时 ， 菜 单 绕 左 上 角 旋 转 
代码 分 析 : 在 示例 6-7 中 ,仍然 保留 菜单 项 变形 前 的 显示 区 域 。 在 鼠标 经 过 的 样式 中 ， 
设置 transform 属性 值 为 旋转 变形 , 同时 定义 了 变形 的 原点 为 元 素 的 左上 角 。 示例 运行 结果 
如 图 6-10 所 示 ， 鼠 标 划 过 菜单 绕 左 上 角 旋 转 一 定 的 角度 。 


6.1.9 实验 室 : 设计 图 片 画廊 

通常 的 图 片 预览 会 整齐 地 摆 放 图 片 ， 如 此 精确 的 对 章 排版 ， 也 只 有 电脑 才能 完成 。 本 
节 我 们 就 模拟 一 个 图 片 画 廊 ， 随 意 地 摆 放 ， 还 原 一 种 真实 的 感觉 。 

1. 案例 简介 


本 节 介绍 的 案例 ， 是 模拟 一 个 图 片 画廊 如 图 6-11 所 示 。 在 一 个 限定 的 区 域 范围 内 ， 摆 
放 15 张 图 片 ， 每 张 图 片 都 有 不 同 程度 的 旋转 ， 并 指定 旋转 的 原点 。 鼠 标 经 过 图 片 时 ， 图 片 
会 以 左上 角 为 原点 调整 至 正常 的 角度 并 放大 显示 ; 鼠标 离开 后 ， 又 会 还 原 为 原来 的 状态 。 


图 6-11 图 片 画 廊 


2. 设计 网 页 元 素 


在 网 页 里 以 列表 的 形式 添加 15 张 图 片 。 
【示例 6-8】 图 片 画 亡 。 


<!DOCTYPEHTML> 
<html> 
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<head> 

<meta charset="utf-8"> 

<title> 图 片 画廊 </title> 

</head> 

<body> 

<ul id="gallery"> 
<li><a href="#"” title=" 图 片 1"><img src="images/imagel.jpg”alt=" 图 片 1" 
/></a></1i> 
<li><a href="#"” title=" 图 片 2"><img src="images/image2.jpg”alt=" 图 片 2" 
/></a></1i> 
<li><a href="#" title=" 图 片 3"><img src="images/image3.jpg" alt=" 图 片 3" 
/></a></1i> 


… 省 略 了 相似 的 代码 


<1i><a href="#" title=" 图 片 15"><img src="images/image15.jpg" alt: 


片 


LOW >/ 

</ul> 

</body> 

</html> 

下 面 逐步 设计 样式 表 ， 并 追加 到 示例 6-8 中 。 
3. 设计 基本 样式 表 


设置 基本 的 样式 表 ， 包 括 背 景 墙 样式 和 整体 的 尺寸 布局 ， 链 接 显示 为 块 级 元 素 ， 以 方 


便 变 形 和 布局 。 
<style type="text/css"> 
body { 
background:url (images/bark.jpg); /* 设置 背景 墙 */ 
} 
#gallery { 


上 
#gal 


margin: 10px auto; 
padding: 40px; 


ist-style:none; 


width:530px; 


ery li { 
float:left; 


width:106px; 
height:80px; 


; 


overflow:visible; /* 溢出 仍然 显示 完整 内 容 */ 


#gallery li a { 


HE 


Color:#333; 

text-decoration:none; 

font-size:4px; 

display:block; 

text-align:center; 

background-color:#FFF; 

padding:3px; 

opacity:0.8; 

box-shadow:0 0 5px 2px #333; /* 设置 元 素 阴 影 */ 


</style> 


4. 设计 变形 样式 表 


设计 


. 154 


-出 随意 摆 放 的 图 片 效 果 。 首 先 设置 所 有 的 链接 默认 的 倾斜 ， 并 自 定 义 变形 原点 ， 
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同时 加 入 动画 过 渡 效 果 。 使 用 CSS 选择 器 设置 不 一 样 的 旋转 角度 。 


<style type="text/css"> 

#gallery li af{ 
/* 设计 变形 的 过 渡 效 果 */ 
-webkit-transition: all 500ms linear; 
-moz-transition: all 500ms linear; 
transition: all 500ms linear; 
/* 自 定义 变形 原点 */ 
-webkit-transform-origin:0 0; 
-moz-transform-origin:0 0; 
transform-origin:0 0; 
/* 旋转 变形 */ 
-webkit-transform: rotate(-15deg); 
-moz-transform: rotate(-15deg); 
transform: rotate(-15deg); 


#gallery li a img { 
width:100px; 


#gallery li:nth-child(3n) a { 
-webkit-transform: rotate (20deg); 
-moz-transform: rotate (20deg); 
transform: rotate (20deg); 


#gallery li:nth-child(4n) a { 
-webkit-transform:rotate (15deg) : 
-moz-transform: rotate (15deg) : 
transform: rotate (15deg) : 


#gallery li:nth-child(7n) a { 
-webkit-transform: rotate(-10deg); 
-moz-transform: rotate(-1l0deg); 
transform: rotate(-10deg); 


#gallery li:nth-child(9n) a { 
-webkit-transform: rotate(-20deg); 
-moz-transform: rotate(-20deg); 
transform: rotate(-20deg); 


</style> 


5. 设计 鼠标 划 过 时 的 样式 表 
设计 鼠标 划 过 时 , 图 片 调整 为 正常 角度 并 放大 显示 , 同时 也 给 图 片 添加 说 明 性 的 内 容 。 


<style type="text/css"> 
#gallery li a:hover { 
position:relative; 
z-index: 9993; 
opacity: Ts 
/* 旋转 并 放大 */ 
-webkit-transform: rotate (0deg) scale(2); 
-moz-transform: rotate (0deg) scale(2); 
transform: rotate(0deg) scale(2); 
} 
#gallery li a:hover:after { 
content:attr (title); /* 添加 title 属性 内 容 */ 


i 
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</style> 


至 此 ， 已 经 完成 了 图 片 画廊 的 实现 。 即 可 以 展现 如 图 6-11 所 示 的 页 面 效果 。 
6.2 CSS 3 过 渡 效 果 


在 CSS 3 中 ，transform 属性 所 实现 的 元 素 变形 ， 仅 仅 呈 现 的 是 变形 结果 。CSS 3 的 过 
渡 效 果 ， 可 以 让 元 素 变形 看 起 来 比较 平滑 。 本 节 就 对 其 中 的 过 渡 效 果 进 行 讲解 。 


6.2.1 实现 过 渡 效 果 一 一 transition 属性 


CSS 3 新 增 transition 属性 ， 可 以 实现 元 素 变换 过 程 中 的 过 渡 效 果 ， 即 实现 了 基本 的 动 
画 。 与 元 素 变形 属性 一 起 使 用 ， 可 以 展现 元 素 的 变形 过 程 ， 丰 富 动画 的 效果 。 


1. 参数 说 明 
transition 属性 用 于 定义 元 素 变换 过 程 中 的 过 渡 效 果 ， 语 法 如 下 : 


transition :transition-property || transition-duration || transition- 

timing-function || transition-delay ; 

取 值 说 明 如 下 。 

口 <transition-property>: 定义 用 于 过 渡 的 属性 。 

口 <transition-duration>: 定义 过 渡 过 程 需要 的 时 间 。 

口 <transition-timing-function>: 定义 过 渡 方 式 。 

口 <transition-delay>: 定义 开始 过 渡 的 延迟 时 间 。 

transition 属性 定义 一 组 过 渡 效 果 ， 需 要 上 面 4 个 方面 的 参数 ，transition 属性 可 以 同时 
定义 两 组 或 两 组 以 上 的 过 渡 效 果 ， 每 组 用 去 号 间隔 。 

基于 webkit 内 核 的 私有 属性 是 -webkit-transition; 基于 gecko 内 核 的 私有 属性 是 
-moz-transition; 基于 presto 内 核 的 奉 代 私有 属性 是 -o-transition 。 

2. 包含 子 属性 

transition 属性 是 一 个 复合 属性 ， 可 以 同时 定义 过 渡 效 果 所 需要 的 参数 信息 。 其 包含 4 
个 方面 的 信息 ， 就 有 4 个 子 属性 : transition-property、transition-duration、transition-timing- 
function、 transition-delay。 

对 于 子 属性 ， 基 于 webkit 内 核 的 浏览 器 需 增加 前 级 “-webkit-”， 基 于 gecko 内 核 的 
浏览 器 需 增 加 前 级 “-moz-”， 基 于 presto 内 核 的 浏览 器 需 增 加 前 级 “-o-”， 以 使 用 各 种 
内 核 的 私有 属性 。 


3. 示例 介绍 


【示例 6-9】 过 渡 效 果 。 


<!DOCTYPEHTML> 
<html> 
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<head> 

<meta charset="utf-8"> 

<title> 过 渡 效 果 </title> 

<style type="text/css"> 

div { 
margin:100px auto; 
width:200px; 
height:100px; 
background-color:#00F; 
/* 设置 过 渡 效 果 */ 
-webkit-transition:all 1000ms linear 500ms; /* 兼容 webkit 内 核 */ 


-moz-transition:all 1000ms linear 500ms; /* 兼容 gecko 内 核 */ 
-o-transition:all 1000ms linear 500ms; /* 兼容 presto 内 核 */ 
transition:all 1000ms linear 500ms; /* 标准 写法 */ 


div:hover { 
background-color:#F90; 
/* 设置 变形 : 旋转 240deg */ 
-webkit-transform: rotate (240deg) : 
-moz-transform: rotate (240deg); 
-o-transform: rotate (240deg); 
transform: rotate (240deg); 

$ 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


运行 结果 如 图 6-12 所 示 。 


图 6-12 元 素 变 换 的 过 渡 效 果 


代码 分 析 : 在 示例 6-9 中 ， 为 元 素 的 样式 变化 赋予 过 渡 效 果 ， 并 在 元 素 的 :hover 事件 
中 设置 了 背景 颜色 和 旋转 变形 。 如 图 6-12 所 示 ， 左 边 为 起 始 状 态 ， 中 间 为 变换 过 程 中 的 某 
个 状态 ， 右 边 为 变换 结束 的 状态 。 有 了 过 渡 效 果 ， 才 算 实现 了 基本 的 动画 效果 。 


6.2.2 ”指定 过 渡 的 属性 一 一 transition-property 属性 


1. 参数 说 明 
transition-property 子 属 性 用 于 定义 过 渡 的 属性 ， 语 法 如 下 : 


transition-property : none | all | <property> ; 


i 
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取 值 说 明 如 下 。 

口 none: 表示 没有 任何 CSS 属性 有 过 渡 效 果 。 

口 all: 为 默认 值 ， 表 示 所 有 的 CSS 属性 都 有 过 渡 效 果 。 

口 <property>: 指定 一 个 用 逗号 分 隔 的 多 个 属性 ， 针 对 指定 的 这 些 属 性 有 过 渡 效 果 。 


2. 示例 介绍 


【示例 6-10】 指定 个 别 属性 有 过 渡 效 果 。 


<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 指 定 个 别 属性 有 过 渡 效 果 </title> 

<style type="text/css"> 

div { 
margin:100px auto; 
width:200px; 
height:100px; 
background-color:#00F; 
/* 设置 过 渡 属 性 */ 
-webkit-transition-property:-webkit-transform; 
-moz-transition-property:-moz-transform; 
-o-transition-property:-o-transform; 
transition-property:transform; 
/* 设置 过 渡 时 间 */ 
-webkit-transition-duration:1s7 
-moz-transition-duration:1s; 
-o-transition-duration:1s; 
transition-duration:1s; 


div:hover { 
background-color:#F90; 
/* 设置 变形 : 旋转 240deg */ 
-webkit-transform:rotate (240deg); 
-moz-transform: rotate (240deg); 
-0o-transform:rotate (240deg); 
transform: rotate (240deg); 

| 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


运行 结果 如 图 6-13 所 示 。 


上 


起 始 变换 中 


图 6-13 ”部 分 属性 的 过 渡 效 果 


be 
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代码 分 析 : 在 示例 6-10 中 ,使 用 transition-property 属性 指定 了 变形 属性 ， 没 有 指定 背 
景 属性 ， 所 以 在 变换 中 的 过 渡 效 果 ， 只 有 变形 的 过 渡 ， 背景 的 变换 没有 过 渡 。 如 图 6-13 所 
示 ， 变 换 中 的 背景 颜色 没有 过 渡 效果 。 


6.2.3 ”指定 过 渡 的 时 间 transition-duration 属性 


1， 参数 说 明 
transition-duration 子 属 性 用 于 定义 过 渡 过 程 中 需要 的 时 间 。 语 法 如 下 : 


transition-duration : <time> ; 


取 值 说 明 : <time> 指 定 一 个 用 逗号 分 隔 的 多 个 时 间 值 ， 时 间 的 单位 可 以 是 s( 秒 ) 或 
ms 毫秒 ) 。 默 认 情 况 下 为 0， 即 看 不 到 过 渡 效 果 ， 看 到 的 直接 是 结果 。 


2. 示例 介绍 


【示例 6-11】 为 过 渡 属 性 指定 不 同 的 过 渡 时 间 。 


<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 过 渡 效 果 </title> 

<style type="text/css"> 

div { 
margin:100px auto; 
width:200px; 
height:100px; 
background-color:#00F; 
/* 设置 多 个 过 渡 属 性 */ 
—webkit-transition-property:background-color, -webkit-transform; 
-moz-transition-property:background-color, -moz-transform; 
-o-transition-property:background-color,-o-transform; 
transition-property:background-color, transform; 
/* 设置 多 个 过 渡 时 间 */ 
-webkit-transition-duration:4s,1s; 
-moz-transition-duration:4s,1s; 
-o-transition-duration:4s,1s; 
transition-duration:4s,1s; 


div:hover { 
background-color:#F90; 
/* 设置 变形 : 旋转 240deg */ 
—webkit-transform: rotate (240deg) 
-moz-transform: rotate (240deg); 
-0o-transform:rotate (240deg); 
transform: rotate (240deg); 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


i 
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运行 结果 如 图 6-14 所 示 。 


起 始 变换 中 变形 结束 结束 


图 6-14 过 渡 时 间 不 同 的 过 渡 效 果 


代码 分 析 : 在 示例 6-11 中 ， 指 定 了 两 个 过 渡 时 间 4s 和 1s， 分 别 应 用 于 背景 属性 和 变 
形 属性 。 如 图 6-14 所 示 ， 变 形 的 过 渡 效 果 都 已 经 结束 了 ， 背 景 颜色 的 过 渡 效 果 还 在 持续 ， 
直至 背景 的 过 渡 完 成 。 


6.2.4 指定 过 渡 延 迟 时 间 一 一 transition-delay 属性 


1. 参数 说 明 


transition-delay 子 属 性 用 于 定义 过 渡 的 延迟 时 间 。 语 法 如 下 : 
transition-delay :<time> ; 


取 值 说 明 : <time> 指 定 一 个 用 逗号 分 隔 的 多 个 时 间 值 ， 时 间 的 单位 可 以 是 s〈 秒 ) 或 
ms《〈 毫 秒 ) 。 默 认 情况 下 为 0， 即 没有 时 间 延 迟 ， 立 即 开始 过 渡 效 果 。 
时 间 可 以 为 负 值 ， 但 过 渡 的 效果 会 从 该 时 间 点 开始 ， 之 前 的 过 渡 效果 将 被 截断 。 


2. 示例 介绍 


【示例 6-12】 延迟 的 过 渡 效 果 。 


<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 过 渡 效 果 </title> 

<style type="text/css"> 

div { 
margin:100px auto; 
width:200px; 
height:100px; 
background-color:#00F; 
/* 设置 过 渡 属性 */ 
—webkit-transition-property:all; 
-moz-transition-property:al17 
-Oo-transition-property:al17 
transition-property:all; 
/* 设置 过 渡 时 间 */ 


—webkit-transition-duration:500ms; 
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-moz-transition-duration:500ms7 
-o-transition-duration:500ms; 
transition-duration:500ms; 

/* 设置 延迟 时 间 */ 
-webkit-transition-delay:500ms; 
-moz-transition-delay:500ms; 
-o-transition-delay:500ms; 
transition-delay:500ms; 


div:hover { 
background-color:#F90; 
/* 设置 变形 : 旋转 240deg */ 
-webkit-transform:rotate(240deg) 
-moz-transform:rotate (240deg) 
-0o-transform:rotate (240deg) 
transform: rotate (240deg) 

| 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


运行 结果 如 图 6-12 所 示 。 代 码 分 析 : 在 示例 6-12 中 ， 设 置 了 所 有 属性 的 改变 ， 都 有 


过 渡 效 果 ， 并 设置 了 过 渡 效 果 的 延迟 时 间 。 当 鼠标 经 过 时 ， 需 要 等 待 500ms 后 ， 才 产生 过 
渡 效 果 。 过 渡 效 果 如 图 6-12 所 示 ， 不 同 的 是 ， 过 渡 效 果 延 迟 了 一 段 时 间 才 开始 。 


6.2.5 ”指定 过 渡 方 于 


-function 属性 


1. 参数 说 明 
transition-timing-function 子 属性 用 于 定义 过 渡 的 速度 曲线 ， 即 过 渡 方 式 。 语 法 如 下 : 


transition-timing-function :ease | linear | ease-in | ease-out | ease-in-out 
| cubic-bezier(n,n,n,n) ; 

取 值 说 明 如 下 。 

口 linear: 表示 过 渡 一 直 是 一 个 速度 ， 相 当 于 cubic-bezier(0,0,1,1)。 

口 ease: 属性 的 默认 值 , 表示 过 渡 的 速度 先 慢 、 再 快 、 最 后 非常 慢 , 相当 于 cubic-bezier 
(0.25,0.1,0.25,1)。 

口 ease-in: 表示 过 渡 的 速度 先 慢 、 后 越 来 越 快 ， 直 至 结束 ， 相 当 于 cubic-bezier 


(0.42,0,1,1). 

口 ease-out: 表示 过 渡 的 速度 先 快 、 后 越 来 越 慢 ， 直 至 结束 ， 相 当 于 cubic-bezier 
(0.0,0.58,1). 

口 ease-in-out: 表示 过 渡 的 速度 在 开始 和 结束 时 ， 都 很 慢 ， 相 当 于 cubic-bezier 
(0.42,0,0.58,1)。 


口 cubic-bezier(n,n,n,n): 自 定义 贝 塞 尔 曲线 效果 , 其 中 的 4 个 参数 为 从 0 到 1 的 数字 。 
2. 示例 介绍 
【示例 6-13】 渐 隐 的 过 渡 效 果 。 


-ls 
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<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 过 渡 效 果 </title> 
<style type="text/css"> 


div 


div 


} 


{ 

margin:100px auto; 

width:200px; 

height:100px; 

background-color:#00F; 

/* 设置 过 渡 属 性 */ 
-webkit-transition-property:all; 
-moz-transition-property:all; 
-o-transition-property:all; 
transition-property:all; 

/* 设置 过 渡 时 间 */ 
-webkit-transition-duration:1000ms; 
-moz-transition-duration:1000ms; 
-o-transition-duration:1000ms; 
transition-duration:1000ms; 

/* 设置 过 渡 方 式 */ 
-webkit-transition-timing-function:ease-out; 
-moz-transition-timing-function:ease-out; 
-o-transition-timing-function:ease-out; 
transition-timing-function:ease-out; 


:hover { 


background-color:#F90; 

/* 设置 变形 : 旋转 240deg */ 
-webkit-transform:rotate (240deg); 
-moz-transform: rotate (240deg); 
-o-transform:rotate (240deg); 
transform:rotate (240deg); 


</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


运行 结果 如 图 6-12 所 示 。 
代码 分 析 : 在 示例 6-13 中 ,设置 了 速度 越 来 越 慢 的 过 渡 效 果 。 当 鼠标 经 过 时 ,快速 产 
生 过 渡 效 果 ， 然 后 缓慢 地 结束 。 这 种 效果 比较 常用 。 
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实验 室 : 制作 滑动 的 菜单 


3 的 过 渡 效 果 ， 来 实现 一 个 滑动 效果 的 菜单 。 
1 案例 简介 
本 节 介绍 的 案例 是 一 个 有 滑动 效果 的 菜单 ， 当 鼠标 经 过 荣 辣 


"Os 


和 要 组 成 部 分 ， 设 计 一 个 良好 的 菜单 是 很 有 必要 的 。 下 面 我 们 就 用 CSS 


时， 菜单 会 加 长 ， 颜 色 也 
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会 改变 ， 中 间 的 过 渡 呈 现 的 是 快速 滑动 的 效果 ; 当 鼠 标 离开 时 ， 菜 单 还 原 ， 则 呈现 缓慢 的 
滑动 效果 ， 如 图 6-15 所 示 。 为 了 版 面 需要 ， 我 们 制作 了 三 组 效果 一 样 的 菜单 。 


图 6-15 ”鼠标 滑 过 的 菜单 


2. 设计 网 页 元 素 


页 面 中 是 三 组 列表 ， 用 于 菜单 的 制作 。 
【示例 6-14】 滑动 的 菜单 。 


<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 滑 动 的 菜单 </title> 

</head> 

<body> 

<ul class="box"> 
<li><a href="#">HTML5</a></1i> 
<li><a href="#">CSS 3</a></1i> 
<1i><a href="#">jQuery</a></1i> 
<1i><a href="#">Ajax</a></1i> 
<1i><a href="#">HTML5</a></1i> 
<li><a href="#">CSS 3</a></1i> 
<li><a href="#">jQuery</a></1i> 
<li><a href="#">Ajax</a></1i> 

</ul> 

<ul class="box"> 
<li><a href="#">HTML5</a></1i> 
<li><a href="#">CSS 3</a></1i> 
<li><a href="#">jQuery</a></1i> 
<li><a href="#">Ajax</a></1i> 
<li><a href="#">HTML5</a></1i> 
<li><a href="#">CSS 3</a></1i> 

</ul> 

<ul class="box"> 
<li><a href="#">HTML5</a></1i> 
<li><a href="#">CSS 3</a></1i> 
<1i><a href="#">jQuery</a></1i> 
<li><a href="#">Ajax</a></1i> 

</ul> 

</body> 
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</html> 


下 面 开 始 进行 样式 表 设 计 ， 并 追加 到 示例 6-14 中 。 
3. 设计 样式 表 


大 部 分 是 基本 的 样式 表 ， 把 每 个 列表 项 均 设置 为 菜单 形式 。 其 中 在 列表 项 中 ， 
其 设置 了 时 间 较 长 的 过 渡 效 果 ; 而 在 其 :hover 事件 中 设置 了 时 间 较 短 的 过 渡 效 果 。 


<style type="text/css"> 
-box { 


} 


margin:0; 
padding:0; 
font-size:12px; 
list-style:none; 
width:120px; 
float:left; 


width:80px; 

line-height:20px; 

height:20px; 

margin:1px; 
background-color:#ccc; 
text-align:left; 

border-radius:0 10px 10px 0; 
border-left:3px solid #333; 

/* 持续 时 间 较 长 的 过 渡 效 果 */ 
-webkit-transition:all 1s ease-out; 
-moz-transition:all 1s ease-out; 
-o-transition:all 1s ease-out; 
transition:all 1s ease-out; 


Se 


} 


display:block; 
text-decoration:none; 
font-size:12px; 
padding-left:5px; 
font-family:Arial; 
font-weight:bold; 
Color:#666; 


li:hover { 


}: 


background-color:#f£90; 

width:100px; 

/* 持续 时 间 较 短 的 过 渡 效 果 */ 
-webkit-transition:all 200ms linear; 
-moz-transition:all 200ms linear; 
-o-transition:all 200ms linear; 
transition:all 200ms linear; 


li:hover a { 
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</style> 


至 此 ， 滑动 菜单 设计 完毕 。 运 行 结果 如 图 6-15 所 示 ， 当 鼠标 经 过 菜单 时 ， 菜 单 会 迅速 
地 过 渡 到 :hover 事件 中 的 效果 当 鼠 标 离开 时 ， 菜 单 状态 会 缓慢 地 恢复 至 初始 状态 。 


6.3 CSS 3 动画 设计 


前 面 讲述 的 元 素 变形 和 过 渡 效 果 ， 是 制作 动画 的 基础 ， 但 还 不 是 真正 的 动画 。 本 节 将 
学 习 完整 的 CSS 3 动画 设计 ， 不 但 可 以 创建 动画 关键 帧 ， 还 可 以 对 关键 帧 动画 设置 播放 时 
间 、 播 放 次 数 、 播 放 方 向 等 ， 实 现 更 加 复杂 、 更 加 灵活 的 动画 。 


6.3.1 关键 帧 动画 


@keyframes 规则 


在 动画 设计 中 ， 关 键 帧 动画 是 非常 重要 的 功能 ， 它 所 包含 的 是 一 段 连 续 的 动画 。 
1. 参数 说 明 
@keyframes 规则 的 语法 表示 如 下 : 


@keyframes<animationname> { <keyframes-selector> { <css-styles>}} 


取 值 说 明 如 下 。 

口 <animationname>: 动画 的 名 称 。 必须 定义 一 个 动画 名 称 , 方便 与 动画 属性 animation 

口 <keyframes-selector>: 动画 持续 时 间 的 百分比 ， 也 可 以 是 fom 和 to。from 对 应 的 
是 0%，to 对 应 的 是 100%， 建 议 使 用 百分比 。 必 须 定 义 一 个 ， 才 能 实现 动画 。 

口 <css-styles>: 设置 的 一 个 或 多 个 合法 的 样式 属性 。 必 须 定义 一 些 样 式 ， 才 能 实现 
动画 。 

动画 ， 是 通过 从 一 种 样式 逐步 转变 到 另 一 种 样式 来 创建 的 。 在 指定 CSS 样式 变化 时 ， 

可 以 从 0% 到 100%， 逐 步 设 计 样 式 表 的 变化 。 


2. 示例 介绍 


使 用 动画 属性 来 控制 动画 的 呈现 ， 关 键 帧 动画 是 通过 名 称 与 动画 绑 定 的 。 

【示例 6-15】 变换 位 置 的 小 球 。 

<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 变 换 位置 的 小 球 </title> 

<style type="text/css"> 

div { 
position:absolute; 
-moz-animation:mymove 5s infinite; /* mymove 绑 定 到 动画 ，gecko 内 核 */ 
-webkit-animation:mymove 5s infinite; ”/*# mymove 绑 定 到 动画 ，webkit 内 核 */ 
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@-moz-keyframes mymove { /* 创建 关键 帧 动画 ，gecko 内 核 */ 
0% {top:Opx;} 
25% {top:200px; left:200px; 
75% {top:50px; left:10px;} 
100% {top:100px; left:60px;} 


一 


} 
@-webkit-keyframes mymove { /* 创建 关键 帧 动画 ，webkit 内 核 */ 
0% {top:Opx;} 
25% {top:200px; left:200px;} 
75% {top:50px; left:10px;} 
100% {top:100px; left:60px;} 
} 
</style> 
</head> 
<body> 
<div><img src="images/point.png" width="30" height="30"></div> 
</body> 
</html> 


运行 结果 如 图 6-16 所 示 。 


辐 变换 位 置 的 小 球 
© | yxw740:8080/hc/Chapter 


图 6-16 球 的 位 置 会 不 停 的 变化 


代码 分 析 : 在 示例 6-15 中 ,创建 了 名 为 mymove 的 关键 帧 动画 ， 并 绑 定 到 小 球 所 在 的 
元 素 中 。 如 图 6-16 所 示 ， 小 球 的 位 置 会 发 生变 化 。 关 于 该 示例 中 的 animation 属性 将 在 接 
下 来 的 章节 进行 讲解 。 


6.3.2 动画 的 实现 一 一 animation 属性 

CSS 3 提供 的 animation 属性 ， 是 专门 用 于 动画 设计 的 ， 它 可 以 把 一 个 或 多 个 关键 帧 动 
画 绑 定 到 元 素 上 ， 以 实现 更 加 复杂 的 动画 。 

1. 参数 说 明 

animation 属性 用 于 同时 定义 动画 所 需要 的 完整 信息 ， 其 语法 如 下 


animation : <name> <duration> <timing-function> <delay> <iteration-count> 
<direction> ; 
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取 值 说 明 如 下 。 
<name>: 定义 动画 的 名 称 ， 绑 定 指定 的 关键 帧 动画 。 
<duration>: 定义 动画 播放 的 周期 时 间 。 
<timing-function>: 定义 动画 的 播放 方式 ， 即 速度 曲线 。 
<delay>: 定义 动画 的 延迟 时 间 。 
<iteration-count>: 定义 动画 应 该 播放 的 次 数 。 
<direction>: 定义 动画 播放 的 顺序 方向 。 
animation 属性 可 以 定义 一 个 动画 的 6 个 方面 的 参数 信息 ， 还 可 以 同时 定义 多 个 动画 ， 
每 个 动画 的 参数 信息 为 一 组 ， 用 逗号 分 隔 开 来 。 基 于 webkit 内 核 的 可 替代 私有 属性 是 
-Webkit-animation; 基于 gecko 内 核 的 可 替代 私有 属性 是 -moz-animation 。 


2. 包含 子 属性 
animation 属性 是 一 个 复合 属性 ， 根 据 其 语法 定义 ，animation 属性 包含 6 个 子 属性 : 


animation-name 、 animation-duration 、 animation-timing-function 、 animation-delay 、 
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animation-iteration-count、animation-direction。 
对 于 子 属性 ， 基 于 webkit 内 核 的 浏览 器 需 增 加 前 级 “-webkit-”， 基 于 gecko 内 核 的 
浏览 器 需 增 加 前 级 “-moz-”， 基 于 presto 内 核 的 浏览 器 需 增 加 前 级 “-o-”， 以 使 用 各 种 
内 核 的 私有 属性 。 


3. 指定 动画 的 名 称 

animation-name 子 属性 用 来 定义 动画 的 名 称 。 该 名 称 是 一 个 动画 关键 帧 名 称 ， 是 由 
@keyframes 规则 定义 的 。 语 法 如 下 : 

animation-name :<keyframename> | none; 

取 值 说 明 如 下 。 

口 none: 默认 值 ， 表 示 没 有 动画 。 

口 <keyframename>: 指定 动画 名 称 ， 即 指定 名 称 对 应 的 动画 关键 帧 。 

如 果 动 画 关 键 帧 的 名 称 为 none， 则 不 会 显示 动画 ; 可 以 同时 指定 多 个 动画 名 称 ， 多 个 
名 称 用 有 逗号 间隔 ; 如 果 需 要 ， 可 以 使 用 none， 取 消 任何 动画 。 

指定 动画 播放 时 间 

animation-duration 子 属性 用 来 定义 动画 播放 的 周期 时 间 。 语 法 如 下 : 

animation-duration : <time>; 

取 值 说 明 : <time> 用 于 指定 播放 动画 的 时 间 长 度 ， 单 位 为 m ( 秒 ) 或 ms (毫秒 ) 。 默 
认 值 为 0， 表 示 没 有 动画 

5. 延迟 动画 播放 方式 一 一 animation-timing-function 属 性 


animation-name 属 性 


animation-duration 属 性 


animation-timing-function 子 属 性 用 来 定义 动画 的 播放 方式 。 语 法 如 下 : 


animation-timing-function : ease | linear | ease-in | ease-out | ease-in-out 
| cubic-bezier(n,n,n,n) ; 
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取 值 说 明 : 关于 这 些 取 值 的 说 明 , 完全 参阅 transition-timing-function 属性 的 取 值 说 明 。 
6. 指定 动画 延迟 时 间 一 一 animation-delay 属 性 


animation-delay 子 属性 用 来 定义 动画 播放 的 延迟 时 间 ， 可 以 定义 一 个 动画 延迟 一 段 时 
间 再 开始 播放 。 语 法 如 下 : 


animation-delay : <time>; 


取 值 说 明 : <time> 用 于 指定 播放 动画 的 时 间 长 度 ， 单 位 为 m ( 秒 ) 或 ms (毫秒 ) 。 默 
认 值 为 0， 表示 没有 时 间 延 迟 ， 直 接 播放 动画 。 


7. 指定 动画 播放 次 数 一 一 animation-iteration-count 属 性 


animation-iteration-count 子 属性 用 来 定义 动画 循环 播放 的 次 数 。 语 法 如 下 : 
animation-iteration-count : infinite | <n>; 


取 值 说 明 如 下 。 

口 infinite: 表示 无 限 次 的 播放 下 去 。 

口 <n>: 该 值 为 数字 ， 表 示 循 环 播放 的 次 数 。 属 性 的 默认 值 为 1， 表 示 动 画 只 播放 
二 次， 


8. 指定 动画 播放 方向 
animation-direction 子 属性 用 来 定义 动画 循环 播放 的 方向 。 语 法 如 下 : 


animation-direction : normal | alternate ; 

取 值 说 明 如 下 。 

口 normal: 为 默认 值 ， 表 示 按 照 关 键 帧 设 定 的 动画 方向 播放 。 

口 altemate: 表示 动画 的 播放 方向 与 上 一 播放 周期 相反 ， 第 一 播放 周期 还 是 正常 的 播 
放 方向 。 

为 方便 实现 复杂 的 动画 ，CSS 3 提供 了 @keyframes 规则 ， 用 于 创建 动画 的 关键 帧 。 

9. 示例 介绍 


下 面 的 示例 中 ， 我 们 尝试 给 元 素 同 时 指定 多 个 关键 帧 动画 。 
【示例 6-16】 变化 的 页 面 元 素 。 


<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 变 化 的 页 面 元 素 </title> 

<style type="text/css"> 

div { 
position:absolute; 
width:100px; 
height:100px; 
top: 50px; 
left:100px; 


animation-direction 属 性 
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background-color:#F90; 
/* 绑 定 两 个 关键 帧 动画 : mymove,myrotate */ 
-moz-animation-name:mymove,myrotate; 
-webkit-animation-name:mymove,myrotate; 
/* 无 限 循环 */ 
-moz-animation-iteration-count:infinite; 
-webkit-animation-iteration-count:infinite; 
/* 线性 变化 */ 
-moz-animation-timing-function:linear; 
-webkit-animation-timing-function:linear; 
/* 设置 两 个 关键 帧 播放 时 间 : 4s,3s */ 
-moz-animation-duration:4s,3s; 
-webkit-animation-duration:4s,3s; 

. 

/* 创建 关键 帧 动画 mymove */ 

@-moz-keyframes mymove { 
50% {top:50px; left:100px;background-color:#00F;} 

} 

@-webkit-keyframes mymove { 
50% {top:150px; left:200px;background-color:#00F;} 

} 

/* 创建 关键 帧 动画 myrotate */ 

@-moz-keyframes myrotate { 
100% {-moz-transform:rotate(360deg);} 

用 

@-webkit-keyframes myrotate { 
100% {-webkit-transform:rotate(360deg);} 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


运行 结果 如 图 6-17 所 示 。 


全 变化 的 页 面 元 素 
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图 6-17 变化 的 页 面 元 素 


代码 分 析 : 在 示例 6-16 中 ， 定 义 了 两 个 关键 帧 动画 ， 分 别 是 移动 变换 背景 的 动画 
mymove 和 旋转 变换 的 动画 myrotate。 在 animation-name 属性 中 ， 同 时 指定 了 这 两 个 关键 
帧 动画 ， 并 在 animation-duration 属性 中 设 定 了 不 同 的 动画 播放 周期 时 间 。 如 图 6-17 所 示 ， 
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页 面 元 素 会 同时 执行 两 个 动画 。 


6.3.3 ”实验 室 : 永 不 停止 的 风车 


如 果 在 网 页 中 使 用 动画 ， 通 常会 使 用 Flash 动画 。 如 果 CSS 能 够 帮 我 们 实现 动画 ， 是 


多 么 令 人 兴奋 的 事情 啊 。 本 节 就 用 CSS 3 实现 网 页 中 的 动画 。 


1.， 案例 简介 
本 节 介绍 的 案例 是 使 用 CSS 设计 一 个 风车 动画 ， 并 让 它 不 停 地 转动 。 风 车 的 扇 叶 和 风 


车 杆 是 由 页 面 元 素 模拟 而 成 的 ， 案 例 效果 如 图 6-18 所 示 。 


图 永 不 停止 的 风车 
© | © ym740:8080/hc/Chapter6/Code6-17.ht 


图 6-18 永 不 停止 的 风车 


2. 设计 网 页 元 素 


风车 扇 叶 分 别 用 三 个 span 元 素 模拟 。 风 车 杆 中 的 图 片 , 用 于 模拟 扇 叶 转动 的 轴 心 位 置 。 
【示例 6-17】 永 不 停止 的 风车 。 


<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 永 不 停止 的 风车 </title> 

</head> 

<body> 

<!-- 风 车 扇 叶 --> 

<div class="pinwheel"> <span class="one"></span> 

<span class="tow"></span><span class="three"></span></div> 


<!-- 风 车 杆 --> 

<div class="tree"><img src="images/point.png" /></div> 
</body> 

</html> 


3. 设计 风车 形状 样式 表 
使 用 CSS 变形 原理 和 圆 角 等 模拟 风车 扇 叶 ， 风 车 杆 设计 成 有 渐变 效果 的 。 
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4. 设计 风车 动画 
创建 关键 帧 动画 keyname， 并 绑 定 到 元 素 的 动画 中 。 
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-webkit-transform-origin:69px 73px; /* 指定 风车 扇 叶 变形 的 中 心 原 点 */ 


-webkit-animation-name:keyname; /* 绑 定 关键 帧 动画 */ 
-webkit-animation-duration:2s; /* 动画 播放 周期 2s */ 
-webkit-animation-iteration-count:infinite; /* 动画 无 限制 循环 */ 
-webkit-animation-timing-function:linear; /* 线性 的 变化 速度 */ 
; 
@-webkit-keyframes keyname { 
from { 
-webkit-transform: rotate (0); 
| 
to { 
-webkit-transform:rotate (360deg); /* 旋转 风车 360deg */ 
} 
</style> 


至 此 ， 动 画 设计 完成 ， 运 行 结果 如 图 6-18 所 示 ， 风 车 会 不 停 地 转动 。 
6.4 CSS 3 渐变 设计 


渐变 ， 是 网 页 设计 中 使 用 频率 较 高 的 一 种 效果 ， 它 可 以 让 元 素 看 起 来 更 有 质感 。 传 统 
的 渐变 实现 方式 是 非常 依赖 图 片 的 ， 而 CSS 3 能 方便 地 实现 元 素 的 渐变 ， 避 免 了 过 多 地 使 
用 渐变 图 片 所 带 来 的 麻烦 ， 而 且 在 放大 网 页 的 情况 下 一 样 过 渡 自 然 。 

渐变 分 两 种 : 线性 渐变 和 径 向 渐变 。 遗 憾 的 是 ， 渐 变 的 实现 方式 还 没有 统一 的 标准 ， 
各 主流 浏览 器 均 提 供 了 私有 的 实现 。 下 面 分 别 对 基于 各 种 内 核 的 实现 进行 讲解 。 


6.4.1 CSS 线性 渐变 


1. 基于 Webkit 内 核 的 实现 
基于 Webkit 内 核 的 线性 渐变 ， 语 法 如 下 : 


-webkit-gradient ( linear,<point>,<point>, from(<color>)，to(<color>) [， 
color-stop (<percent>, <color>)]* ) 


取 值 说 明 如 下 。 

口 linear: 表示 线性 渐变 类 型 。 

口 <point>: 定义 渐变 的 起 始点 和 结束 点 : 第 一 个 表示 起 始点 ， 第 二 个 表示 结束 点 。 
该 坐标 点 的 取 值 ， 支 持 数 值 、 百 分 比 和 关键 字 ， 如 (0.5,0.5)、(50%,50%)、(left,top) 
等 。 关 键 字 包括 : 定义 横 坐 标的 left 和 right， 定 义 纵 坐 标的 top 和 bottom。 
<color>: 表示 任意 CSS 颜色 值 。 

<percent>: 表示 百分比 值 ， 用 于 确定 起 始点 和 结束 点 之 间 的 某 个 位 置 。 

from0: 定义 起 始点 的 颜色 。 

to0: 定义 结束 点 的 颜色 。 

color-stop(): 可 选 函 数 ， 在 渐变 中 多 次 添加 过 渡 颜 色 ， 可 以 实现 多 种 颜色 的 渐变 。 


OOODO 


ws 


第 6 章 酷 炫 的 动画 和 渐变 


基于 Webkit 内 核 的 渐变 语法 比较 严谨 。 
2. 基于 Gecko 内 核 的 实现 


基于 Gecko 内 核 的 线性 渐变 ， 语 法 如 下 : 


-moz-linear-gradient ( [ <point> || <angle>,]?<color>[, <color> 
[<percent>]?]*,<color> ) 


取 值 说 明 如 下 。 
口 <point>: 定义 渐变 的 起 始点 。 该 坐标 的 取 值 支持 数值 、 百 分 比 和 关键 字 。 关 键 字 
包括 : 定义 横 坐 标的 left、center 和 right， 定 义 纵 坐 标的 ttpp、center 和 bottom。 默 
认 坐 标 为 〈top center) 。 当 指定 一 个 值 时 ， 另 一 个 值 默认 为 center。 
口 <angle>: 定义 线性 渐变 的 角度 。 单 位 可 以 是 deg (角度 ) 、grad 梯度) 、rad 
(弧度 ) 。 
口 <color>: 表示 渐变 使 用 的 CSS 颜色 值 。 
口 <percent>: 表示 百分比 值 ， 用 于 确定 起 始点 和 结束 点 之 间 的 某 个 位 置 。 
这 里 没有 函数 作为 参数 ， 可 以 直接 在 某 个 百分比 位 置 添加 过 渡 颜 色 。 第 一 个 颜色 值 为 
渐变 开始 的 颜色 , 最 后 一 个 颜色 值 为 渐变 结束 的 颜色 。 基于 Gecko 内 核 的 线性 渐变 的 实现 ， 
比较 符合 W3C 语法 标准 。 


3. 示例 介绍 


下 面 结合 示例 来 演示 线性 渐变 的 实现 方法 。 
【示例 6-18】 线性 渐变 的 背景 。 


<!DOCTYPEHTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 线 性 渐变 的 背景 </title> 
<style type="text/css"> 
div { 
width:400px; 
height:200px; 
background-color:#F90; 
/* 基于 Webkit 内 核 的 实现 */ 
background: -webkit-gradient (linear,left top,left bottom, from(#f£90), 
to (#0£0)); 
/* 基于 Gecko 内 核 的 实现 */ 
background: -moz-linear-gradient (left,#f90,#0f£0); 


} 

</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


运行 结果 如 图 6-19 所 示 。 
代码 分 析 : 在 示例 6-18 中 ,设计 的 是 一 个 从 上 至 下 的 渐变 ,实现 了 基于 Webkit 和 Gecko 
两 种 浏览 器 的 线性 渐变 。 其 中 基于 Gecko 内 核 的 渐变 实现 ， 应 用 了 其 默认 的 设置 : 当 不 设 
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置 起 点 和 弧度 方向 时 ， 默 认 的 是 从 上 至 下 的 渐变 。 如 图 6-19 所 示 ， 是 在 Chrome 和 Firefox 
两 种 浏览 器 中 运行 的 效果 。 


图 6-19 从 上 到 下 的 线性 渐变 


再 来 实现 从 左 至 右 的 线性 渐变 ， 调 整 样式 表 如 下 : 


<style type="text/css"> 
div { 


} 


width:400px; 

height:200px; 

background-color:#F90; 

/* 基于 Webkit 内 核 的 实现 */ 

background: -webkit-gradient (linear,left top,right top, from(#f£90), 
to (#0£0)); 

/* 基于 Gecko 内 核 的 实现 */ 

background: -moz-linear-gradient (top,#f£90,#0f£0); 


</style> 


运行 结果 如 图 6-20 所 示 。 


图 6-20 ”从 左 至 右 的 线性 渐变 


再 来 实现 从 左上 角 到 右 下 角 的 渐变 ， 调 整 样式 表 如 下 : 


<style type="text/css"> 
div { 


width:400px; 

height:200px; 

background-color:#F90; 

/* 基于 Webkit 内 核 的 实现 */ 

background: -webkit-gradient (linear, left top,right bottom, from(#f£90), 
to (#0£0)); 

/* 基于 Gecko 内 核 的 实现 */ 

background: -moz-linear-gradient (left top,#f£f90,#0f0); 


</style> 


174: 


运行 结果 如 图 6-21 所 示 。 


图 6-21 从 左上 角 至 右 下 角 的 线性 渐变 


再 来 实现 在 渐变 中 增加 过 渡 颜 色 。 调 整 样式 表 如 下 : 


<style type="text/css"> 
div { 
width:400px; 
height:200px; 
background-color:#F90; 
/* 基于 Webkit 内 核 的 实现 */ 
background: -webkit-gradient (linear,left top,right top, from(#f£90), 
to (#0£0) ,color-stop (50%,blue)); 
/* 基于 Gecko 内 核 的 实现 */ 
background: -moz-linear-gradient (left,#f90,blue,#0f£0); 
} 
</style> 


运行 结果 如 图 6-22 所 示 。 


图 6-22 多 种 颜色 的 线性 渐变 


从 上 面 的 这 些 示例 可 以 看 出 ， 基 于 Gecko 内 核 的 渐变 实现 比较 简单 ， 但 不 易 理解 ， 基 
于 Webkit 内 核 的 渐变 实现 代码 较 长 ， 但 逻辑 层次 比较 清晰 。 基 于 IE 内 核 的 渐变 ， 是 借助 
滤 镜 实现 的 ， 这 里 不 再 讲解 。 


6.4.2 ”CSS 径 向 渐变 


1. 基于 Webkit 内 核 的 实现 
基于 Webkit 内 核 的 径 向 渐变 ， 语 法 如 下 : 


i 
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-webkit-gradient 《 radial [, <point>, <radius>] {2}, from(<color>), 

to(<color>) [, color-stop (<percent>, <color>)]* ) 

取 值 说 明 如 下 。 

口 radial: 表示 径 向 渐变 类 型 。 

口 <point>: 定义 渐变 的 起 始 圆 的 圆心 坐标 和 结束 圆 的 圆心 坐标 。 该 坐标 点 的 取 值 ， 
支持 数值 、 百 分 比 和 关键 字 ， 如 (0.5,0.5)、(50%,50%)、(left,top) 等 。 关 键 字 包括 : 
定义 横 坐 标的 left 和 right， 定 义 纵 坐标 的 top 和 bottom。 

口 <radius>: 表示 圆 的 半径 ， 定 义 起 始 圆 的 半径 和 结束 圆 的 半径 。 默 认为 元 素 尺 寸 的 


<color>: 表示 任意 CSS 颜色 值 。 

<percent>: 表示 百分比 值 ， 用 于 确定 起 始点 和 结束 点 之 问 的 某 个 位 置 。 

from(): 定义 起 始 圆 的 颜色 。 

to0: 定义 结束 圆 的 颜色 。 

color-stop(): 可 选 函 数 ， 在 渐变 中 多 次 添加 过 渡 颜 色 ， 可 以 实现 多 种 颜色 的 渐变 。 


2. 基于 Gecko 内 核 的 实现 
基于 Gecko 内 核 的 径 向 渐变 ， 语 法 如 下 : 


-moz-radial-gradient ( [<point> || <angle>,]?[<shape>||<radius>]? <color>[， 

<color> [<percent>]?]*,<color> ) 

取 值 说 明 如 下 。 

口 <point>: 定义 渐变 的 起 始点 。 该 坐标 的 取 值 支持 数值 、 百 分 比 和 关键 字 。 关 键 字 
包括 : 定义 横 坐 标的 left、center 和 right， 定 义 纵 坐 标的 top、center 和 bottom。 默 
认 坐 标 为 〈center center) 。 当 指定 一 个 值 时 ， 另 一 个 值 默认 为 center。 

口 <angle>: 定义 径 向 渐变 的 角度 。 单 位 可 以 是 deg (角度) 、grad (梯度 ) 、rad 
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(弧度 ) 。 
口 <shape>: 定义 径 向 渐变 的 形状 ， 包括 circle( 圆 形 ) 和 ellipse (椭圆 形 )。 默 认为 
ellipse。 


口 <radius>: 定义 圆 的 半径 或 者 椭圆 的 轴 长 度 。 

口 <color>: 表示 渐变 使 用 的 CSS 颜色 值 。 

口 <percent>: 表示 百分比 值 ， 用 于 确定 起 始 圆 和 结束 圆 之 间 的 某 个 位 置 。 

这 里 没有 函数 作为 参数 ， 可 以 直接 在 某 个 百分比 位 置 添加 过 渡 颜 色 。 第 一 个 颜色 值 为 
渐变 开始 的 颜色 , 最 后 一 个 颜色 值 为 渐变 结束 的 颜色 。 基于 Gecko 内 核 的 径 向 渐变 的 实现 ， 
比较 符合 W3C 语法 标准 。 


3. 示例 介绍 
下 面 结合 示例 来 演示 径 向 渐变 的 实现 方法 。 
【示例 6-19】 径 向 渐变 的 背景 贺 


<!DOCTYPEHTML> 
<html> 
<head> 
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<meta charset="utf-8"> 
<title> 径 向 渐变 </title> 
<style type="text/css"> 
div { 
width:400px; 
height:200px; 
background-color:#F90; 
/* 基于 Webkit 内 核 的 实现 */ 
background: -webkit-gradient (radial,200 100,10,200 100, 100, 
from (#f£90) ,to (#0f£0) ,color-stop (50%,blue)); 
/* 基于 Gecko 内 核 的 实现 */ 
background: -moz-radial-gradient (200px 100px,circle,#f90 10px,blue, 
#0£0 100px); 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


运行 结果 如 图 6-23 所 示 。 


图 6-23 径 向 渐变 效果 


代码 分 析 : 在 示例 6-19 中 ， 设 计 的 是 一 个 径 向 渐变 ， 实 现 了 基于 Webkit 和 Gecko 两 
种 浏览 器 径 向 渐变 的 实现 。 可 以 理解 为 从 一 个 小 圆 到 一 个 大 圆 的 渐变 。 在 渐变 过 程 中 ， 增 
加 了 蓝 色 作为 过 渡 颜 色 。 如 图 6-23 所 示 , 是 在 Chrome 和 Firefox 两 种 浏览 器 中 运行 的 效果 。 

由 于 基于 Webkit 和 Gecko 的 径 向 渐变 实现 方法 不 同 ， 复 杂 的 渐变 ， 很 难 同时 实现 。 
例如 ， 使 用 基于 Webkit 的 -webkit-gradient()， 可 以 轻松 实现 放射 效果 ; 基于 Gecko 的 
-moz-radial-gradient()， 则 可 以 轻松 实现 椭圆 效果 。 正 因为 这 些 无 法 统一 的 问题 存在 ， 径 向 
渐变 在 实际 使 用 过 程 中 比较 受 限制 。 复 杂 的 径 向 渐变 ， 这 里 不 再 讲述 。 


6.4.3 ”实验 室 : 设计 渐变 的 按钮 


在 页 面 设计 中 ， 渐 变 的 应 用 随处 可 见 ， 适 当地 使 用 渐变 ， 可 使 网 页 更 具 层次 性 。 使 有 
渐变 最 好 的 地 方 ， 就 是 按钮 了 。 下 面 我 们 就 使 用 渐变 设计 不 同形 状 的 按钮 。 由 于 按钮 风格 
是 CSS 样式 设计 的 ， 因 此 也 可 以 应 用 在 其 他 页 面 元 素 中 。 
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1.， 案例 简介 


本 节 介 绍 的 案例 是 使 用 CSS 渐变 设计 一 组 常用 的 按钮 样式 。 这些 样式 可 以 应 上 


HTML 元 素 中 。 示 例 中 根据 


所 示 。 


圆 角 的 半径 设置 三 种 风格 ， 背 景 为 线性 渐变 ， 效 果 图 如 


2. 设计 网 页 元 素 


设计 三 组 按钮 样式 ， 准 备 三 组 同样 的 页 面 元 素 标 签 ， 每 组 标签 均 为 span、a、input 三 
下 面 的 样式 表 ， 会 把 这 些 标签 设计 成 按钮 风格 。 
【示例 6-20】 设计 渐变 


<!DOCTYPEHTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 设 计 渐 变 的 按钮 </title> 
</head> 
<body> 
<div> <span class="button">Span</span> 
<input type="button" value="Buttom" class="button" /> 
<a href="#" class="button">Link</a> </div> 
<div> <span class="button radius5">Span</span> 
<input type="button" value="Buttom" class="button radius5" /> 
<a href="#" class="button radius5">Link</a> </div> 
<div> <span class="button radius15">Span</span> 
<input type="button" value="Buttom" class="button radius1l5" /> 
<a href="#" class="button radius1l5">Link</a> </div> 
</body> 
</html> 


3. 设计 按钮 的 基本 风格 
设计 按钮 的 内 部 布局 、 阴 影 效果 和 圆 角 效果 。 


<style type="text/css"> 


个 元 素 。 


divt{ 


. 


margin-top:10px; 


-button { 


a 


display:inline; 


图 6-24 渐变 的 按钮 


的 按钮 。 


在 任何 
图 6-24 
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padding:5px 20px; 
font-size:12px; 
font-weight:lighter; 
font-family:Arial, Helvetica, sans-serif; 
border:none; 
color:#333; 
letter-spacing:1px; 
text-decoration:none; 
/* 设置 阴影 效果 */ 
—webkit-box-shadow:2px 2px 2px #333; 
-moz-box-shadow:1lpx lpx lpx #ccc; 
box-shadow:lpx lpx 2px #333; 

' 

.radius5 { 
/* 圆 角 半径 为 5px */ 
—webkit-border-radius:5px; 
-moz-border-radius:5px; 
border-radius:5px; 


} 

-radius15 { 
/* 圆 角 半径 为 15px */ 
—webkit-border-radius:15px; 
—moz-border-radius:15px; 
border-radius:15px; 


下 
</style> 


4. 设计 按钮 的 渐变 效果 
设计 按钮 的 渐变 效果 和 鼠标 经 过 时 的 渐变 效果 。 


<style type="text/css"> 
.button { 
/* 基于 Webkit 内 核 的 实现 */ 
background: -webkit-gradient(1inear，1JlLeft top, left bottom, from 
(#ffcc33), to(#f£90)); 
/* 基于 Gecko 内 核 的 实现 */ 
background: -moz-linear-gradient (#ffcc33, #f£90); 
} 
.button:hover { 
/* 基于 Webkit 内 核 的 实现 */ 
background: -webkit-gradient (linear, left top, left bottom, from 
(#f££9933), to(#ff£3300)); 
/* 基于 Gecko 内 核 的 实现 */ 
background: -moz-linear-gradient (#ff£f9933, #f£ff3300); 


</style> 


至 此 ,渐变 风格 的 按钮 设计 完成 ， 运 行 结果 如 图 6-24 所 示 。 使 用 时 ， 可 根据 页 面 的 风 
格 需要 ， 调 整 渐变 的 色调 。 


6.5 小 结 


EE 点 讲解 了 元 素 
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本 章 主要 讲解 了 CSS 的 元 素 变 形 、 过 渡 效 果 、 动 画 设计 和 渐变 设计 。 
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的 各 种 变形 方法 、 过 渡 效 果 的 实现 ， 以 及 如 何 使 用 渐变 等 。 比 较 难 以 理解 的 是 过 渡 效 果 与 
动画 之 间 的 区 别 ， 而 渐变 的 语法 的 语法 规则 也 是 本 章 的 难点 ， 望 读者 多 加 琢磨 、 练 习 。 下 
一 章 将 介绍 如 何 设 计 支 持 多 种 设备 的 样式 表 方 案 。 


6.6 习 题 


【习题 1】transform 属性 的 值 是 一 个 变形 函数 ， 请 问 有 哪些 变形 函数 ? 

【习题 2】 变 形 属性 transform 默认 的 变形 原点 是 元 素 对 象 的 中 心 点 。 如 果 要 改变 变形 
原点 ， 应 该 使 用 什么 属性 ? 

【习题 3】transition 属性 是 用 来 实现 过 渡 效 果 的 ， 请 列举 它 有 哪些 子 属 性 。 

【习题 4】 请 描述 一 下 CSS 3 中 的 过 渡 效 果 与 动画 之 间 的 区 别 。 

【习题 5】CSS 3 包含 两 种 渐变 : 线性 渐变 和 径 向 渐变 。 请 设计 一 个 包含 渐变 的 页 面 ， 
其 中 的 渐变 使 用 CSS 3 中 的 渐变 来 实现 。 
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伴随 移动 互联 网 的 到 来 ， 越 来 越 多 的 人 开始 使 用 手机 等 手持 终端 设备 上 网 ， 终 端 屏 幕 
尺寸 也 趋 于 多 元 化 。CSS 3 迎合 了 这 种 趋势 ， 提 出 了 媒体 查询 的 新 概念 ， 使 得 设计 的 样式 
表 在 多 种 终端 设备 下 ， 都 能 够 很 好 地 呈现 网 页 。 本 章 将 详细 讲解 面向 多 种 媒体 的 样式 表 
设计 。 


7.1 媒体 查询 


在 CSS 中 ， 与 媒体 相关 的 样式 表 设 计 是 从 CSS 2.1 开始 的 。 在 CSS 2.1 中 ， 可 以 通过 
Media Type 来 区 别 终端 设备 ， 以 指定 不 同 的 样式 表 。 例 如 ， 需 要 打印 网 页 时 ， 设 计 针 对 打 
印 的 样式 表 。Media Type 极 不 灵活 ， 而 且 不 曾 被 多 少 设备 支持 。 

CSS 3 新 增 了 Media Queries (媒体 查询 ) 模块 。 该 模块 中 ， 允 许 添加 媒体 查询 表达 式 ， 
以 指定 媒体 类 型 及 设备 特性 ， 从 而 精确 地 为 不 同 的 设备 应 用 不 同 的 样式 ， 最 终 改善 用 户 


7.1.1 @media 规则 的 语 


Media Queries 模块 中 的 媒体 查询 是 使 用 @media 规则 来 区 别 媒体 设备 ， 并 实现 样式 表 
定义 的 。Media Queries 模块 以 获得 了 Firefox、Safari、Chrome 和 Opera 等 浏览 器 的 支持 。 


1. 参数 说 明 
@media 规则 是 包含 有 查询 表达 式 的 媒体 样式 表 定义 规则 。 语 法 如 下 : 
@media <media query> { <css styles>} 
<media query>: [only | not]? <media type> [ and <expression> ]* 
<expression>: ( <media feature> [: <value>]? ) 
<media type>: all | aural | braille | handheld | print | projection | screen 
| tty | tv | embossed 
<media feature>: width | min-width | max-width | height | min-height | 
max-height 
| device-width | min-device-width | max-device-width 
| device-height | min-device-height | max-device-height 
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio 
| color | min-color | max-color | color-index | min-color-index | 
max-color-index 
| monochrome | min-monochrome | max-monochrome 
| resolution | min-resolution | max-resolution | scan | grid 
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取 值 说 明 如 下 。 


口 <css_style>: 定义 样式 表 。 

口 <media_query>: 设置 媒体 查询 关键 字 ， 如 and ( 逮 辑 与 ) 、not (排除 某 种 设备 ) 、 
only〔( 限 定 某 种 设备 ) 。 

口 <media_type>: 设置 设备 类 型 ， 语 法 中 提供 了 10 种 媒体 类 型 ， 详 情 如 表 7.1 所 示 。 
口 <media feature>: 定义 媒体 特性 ， 该 特性 放 在 括号 中 ， 如 (man-width:800px) 。 


媒体 特性 有 13 种 ， 详 情 如 表 7.2 所 示 。 
表 7.1 Media Queries 媒 体 类 型 说 明 
媒体 类 型 值 媒体 类 型 说 明 
all 所 有 设备 
screem 电脑 显示 器 
print 用 于 打印 机 或 打印 预览 视图 
handheld 便携 或 手持 设备 
tv 电视 机 类 型 的 设备 
speech 语音 和 音频 合成 器 
braille 用 于 盲人 触觉 反馈 设备 
embossed 盲文 打印 /印刷 设备 
projection 各 种 投影 设备 
tty 用 于 使 用 固定 间距 字符 格 的 设备 ， 如 电 传 打 字 机 和 终端 
表 7.2 Media Queries 媒 体 特性 说 明 
媒体 特性 值 可 用 媒体 类 型 接受 min/max 
width length Visual、tactile yes 
height length Visual、tactile yes 
device-width length Visual、tactile yes 
device-height length visual 、tactile yes 
orientation portrait | landscape bitmap no 
aspect-ratio ratio bitmap yes 
device-aspect-ratio Tatio bitmap yes 
color integer visual yes 
color-index integer Visual yes 
monochrome integer Visual yes 
resolution resolution bitmap yes 
scan progressive | interlace tv no 
grid integer visual 、tactile no 


媒体 特性 共有 13 种 ， 形 式 上 与 CSS 属性 类 似 。 但 与 CSS 属性 不 同 的 是 ， 大 部 分 设备 


的 指定 值 接受 min/max 前 绥 ， 


2. 示例 介绍 


下 面 的 示例 是 根据 媒体 查询 规则 ， 当 浏览 器 窗口 大 小 改变 时 ， 会 自动 选择 相应 的 样 


式 表 。 


来 表示 大 于 等 于 或 小 于 等 于 的 逻辑 。 


【示例 7-1】 根据 窗口 尺寸 选择 不 同 的 样式 。 
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<!DOCTYPEHTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 根 据 窗口 尺寸 选择 不 同 的 样式 </title> 

<style type="text/css"> 

| 
font-size:36px; 
font-weight:bold; 
font-family:Arial, Helvetica, sans-serif; 
Color:#FFF; 

} 

nav { 
background-color:#0066ff; 
height:300px; 

; 

section { 
background-color:#f90; 
height:300px; 

aside { 
background-color:#009900; 
height:300px; 

} 

/* 窗口 宽度 大 于 900px */ 

@media screen and (min-width:900px) { 

nav { 

float:left; 

width:25%; 

} 

section { 

float:left; 

width:50%; 

aside { 

float:left; 

width:25%; 

) 

; 

/* 窗口 宽度 在 600px 和 900px 之 间 */ 

@media screen and (min-width:600px) and (max-width:900px) { 

nav { 

float:left; 

width:40%; 

height:200px; 

人 

section { 

float:left; 

width:60%; 

height:200px; 

aside { 

height:100px; 

float:none; 

clear:both; 

} 

/* 窗口 宽度 小 于 600px */ 

@media screen and (max-width:600px) { 

nav { 


= 
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height:150px; 
section { 
height:150px; 

|: 

aside { 
height:150px; 

| 

}; 

</style> 

</head> 

<body> 

<nav> Nav </nav> 
<section>Section</section> 
<aside>Aside</aside> 
</body> 

</html> 


运行 结果 如 图 7-1 一 图 7-3 所 示 。 


可 所 和 RR 和 过 所 不 0 


C Gyerdo 


Nav Section 


图 7-1 窗口 宽度 大 于 900px 时 的 效果 


全 民 据 雪 口 尺寸 过 择 丰 有 的 》 要 所 窗口 尺 中 不 的 


GC 加 yw740 安 C Oy?’40 


图 7-2 窗口 宽度 在 600px 和 900px 之 间 时 的 效果 图 7-3 窗口 宽度 小 于 600px 时 的 效果 
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代码 分 析 : 在 示例 7-1 中 ， 使 用 媒体 查询 的 方法 ， 针 对 不 同 的 窗口 大 小 ， 定 义 了 不 同 
的 样式 表 。 当 窗口 宽度 超过 900px 时 ， 网 页 运行 效果 如 图 7-1 所 示 ; 当 窗口 宽度 在 600px 
和 900px 之 间 时 ， 网 页 运行 效果 如 图 7-2 所 示 ; 当 窗 口 宽度 在 600px 以 下 时 ， 网 页 运行 效 
果 如 图 7-3 所 示 。 


7.1.2 ”使 用 Media Queries 链接 外 部 样式 表 文 件 


在 网 页 设计 中 ， 通 常 是 直接 链接 外 部 样式 表 文件 的 ， 此 时 也 可 以 增加 Media Queries 
媒体 查询 ， 以 适应 媒体 设备 的 需求 。 


1. 在 <link> 标 签 中 应 用 Media Queries 


在 <link> 标 签 中 设置 media 属性 语法 如 下 : 


<link rel="stylesheet" type="text/css" media="<media query>" href= 
RS 


取 值 说 明 : <media_query>， 媒 体 查 询 ， 遵 循 @media 规则 中 的 媒体 查询 方式 。 
2. 示例 介绍 
-个 Media Query 语句 包含 一 种 媒体 类 型 ， 如 果 没 有 指定 媒体 类 型 ， 那 么 就 使 用 默认 
类 型 all。 例 如 : 


<link rel="stylesheet" type="text/css" href="xxx.css" media= 
"(min-width:200px)" /> 


-个 Media Query 语句 也 可 以 同时 包含 多 个 特性 ， 例 如 : 


<link rel="stylesheet" type="text/css" href="xxx.css" 
media="screen and (min-width:200px) and (max-width:400px)" /> 


一 个 Media Query 语句 也 可 以 同时 包含 多 个 媒体 查询 ， 多 个 查询 用 逗号 隔 开 ， 例 如 : 
<link rel="stylesheet" type="text/css" href="xxx.css" 
media="handheld and (max-width:200px), screen and (max-width:300px)" /> 

使 用 not 关键 字 ， 来 排除 符合 表达 式 的 设备 ， 例 如 : 

<link rel="stylesheet" type="text/css" href="xxx.css" media="not screen 

and (color)" /> 

使 用 only 关键 字 , 支持 Media Queries 的 设备 会 正确 地 显示 样式 ; 不 支持 Media Query， 
但 能 正确 读 取 Media Type 的 设备 ， 由 于 先 读 取 到 only 而 不 是 screen 等 ， 将 会 忽略 后 面 的 
样式 。 对 于 不 支持 Media Query 的 正 来 说 ， 无 论 是 否 有 only， 都 会 忽略 样式 。 


7.2 ”实验 室 : 自 适 应 屏幕 的 样式 表 方 案 


使 用 媒体 查询 Media Queries， 可 以 感知 屏幕 的 尺寸 ， 这 样 就 可 以 为 不 同 尺 寸 的 屏幕 设 
计 不 同 的 样式 布局 。 本 章 就 借助 媒体 查询 来 实现 一 个 自 适 应 屏幕 的 页 面 布局 。 


和 本 
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1. 案例 简介 

本 节 介 绍 的 案例 是 一 个 简易 的 网 页 ， 以 北国 风光 为 主题 ， 页 面 内 容 包含 一 个 logo、 一 
个 导航 栏 和 一 个 图 片 的 列表 。 本 案例 中 ， 我 们 将 借助 媒体 查询 ， 将 针对 以 下 屏幕 宽度 进行 
设计 : 大 于 900px、 小 于 900px 且 大 于 600px、 小 于 600px 日 大 于 400px、 小 于 400px。 

为 了 显示 良好 , 每 种 屏幕 宽度 的 页 面 布局 也 会 有 相应 的 调整 和 改变 。 案例 效果 如 图 7-4 
所 示 。 下 面 来 设计 这 个 网 页 。 


名 词 来 历 


© yr740:3080/hc/chapter"/Coce7-T 
小 因 限 多 


名 词 来 历 


北国 雪夫 三 - < = 
名词 来 历 “北国 雪松 风光 图 片 集 


风光 图 片 集 
风光 图 片 集 


名 词 灯 历 北 四 要 疮 


图 7-4 自 适应 屏幕 的 网 页 


2. 网 页 中 基本 的 元 素 


页 面 内 容 包括 logo、 导 航 栏 、 图 片 列表 和 一 个 底部 区 域 。 
【示例 7-2】 自 适应 屏幕 的 样式 表 方 案 。 


<!DOCTYPE html> 
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<html> 
<head> 
<meta charset="utf-8"> 
<title> 北 国 风光 </title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
<!-- 包含 logo 的 导航 栏 --> 
<nav> 
OO 
<h1 id="logo"><a href="#"><img src="images/1ogo-jpg" alt=" 北 国 风光 " > 
</a></h1> 
< 信任 > 
<ul> 


<1i><a href="#"> 名 词 来 历 </a></1i> 
<1i><a href="#"> 北 国 雾 淞 </a></1i> 
<1i><a href="#"> 风 光 图 片 集 </a></1i> 
</ul> 
</nav> 
<section> 
<!=-= 图 片 列表 --> 
<article> 
<h2 style="margin-top:-15px;"><span> 风 光 图 片 集 </span></h2> 
<ol> 
i> <a href="#"> <img src="images/Scenel.jpg" alt=""> <span> 图 片 
</span> </a> </1i> 
i> <a href="#"> <img src="images/Scene2.jpg" alt=""> <span> 图 片 
</span> </a> </1i> 
i> <a href="#"> <img src="images/Scene3.jpg" alt=""> <span> 图 片 
</span> </a> </1i> 
i> <a href="#"> <img src="images/Scene4.jpg" alt=""> <span> 图 片 
</span> </a> </1i> 
i> <a href="#"> <img src="images/Scene5.jpg" alt=""> <span> 图 片 
</span> </a> </1i> 
<1i> <a href="#"> <img src="images/Scene6.jpg" alt=""> <span> 图 片 
6</span> </a> </1i> 
</o1> 
<div class="clear"></div> 
</article> 
<!-- 页 面 底部 --> 
<footer> 北国 风光 gcopy; 2011</footer> 
</section> 
</body> 
</html> 


3. 添加 基本 的 样式 表 


基本 的 样式 表 包 括 基 本 的 风格 设置 ， 暂 时 不 涉及 布局 。 后 面 我 们 将 会 根据 媒体 查询 的 
结果 ， 设 置 不 同 的 布局 样式 表 。 
<style type="text/css" media="screen, projection"> 
body { 
line-height:1; 
Color:#333; 


人 SAWANACA 人 人 


} 

LU 
margin:0; 
padding:0; 


Ts 
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clear:both;border-top: lpx solid #999; 
font-size: 12px; 
text-align: center; 
padding: 10px 0; 
font-family:Arial, Helvetica, sans-serif; 
color:#666; 

! 

</style> 


4. 设计 屏幕 宽度 大 于 900px 的 样式 表 


屏幕 宽度 大 于 900px 时 ,logo 暂 居 左 侧 ， 导航 栏 在 右 侧 的 顶部, 右 侧 中 间 是 图 片 列表 ， 


右 侧 下 方 是 底部 区 域 。 其 中 ， 图 片 列表 每 行 显示 三 个 图 片 。 风 格 
所 示 。 样 式 表 设 计 如 下 : 


<style type="text/css" media="screen, projection"> 
@media (min-width: 900px) { 
nav hl { 
float:left; 
width:35%; 
height:200px; 


nav ul { 
float:left; 
width: 65%; 


nav 1i { 
float:left; 
width:32%; 
margin-left:1%; 


section { 
float:left; 
width: 65%; 
padding:20px 0; 

section 1i { 
float:left; 
margin:10px 2px; 
width:32%; 


} 

section 1i span { 
display:block; 
text-align:center; 
font-size:12px; 

} 

: 

</style> 


5. 设计 屏幕 宽度 小 于 900px 且 大 于 600px 的 样式 表 


屏幕 宽度 小 于 900px 且 大 于 600px 时 ，logo 和 导航 栏 都 会 布 
图 片 列表 ， 右 侧 下 方 是 底部 区 域 。 其中， 图 片 列表 每 行 显示 两 个 
号 2 的 效果 所 示 。 样 式 表 设 计 如 下 : 


<style type="text/css" media="screen, projection"> 
@media (min-width:600px) and (max-width:900px) { 
nav { 


如 图 7-4 中 编号 1 的 效果 


局 在 左 侧 ， 右 侧 的 上 部 是 
图 片 。 风 格 如 图 7-4 中 编 


el 
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float:left; 
width:35%; 

| 

section { 
float:left; 
width: 65%; 
padding:20px 0; 

|: 


section li { 


float:left; 
margin:10px 2px; 
width:48%; 

} 

section 1i span { 
display:block; 
text-align:center; 
font-size:12px; 

i 

有 

</style> 


6. 设计 屏幕 宽度 小 于 600px 且 大 于 400px 的 样式 表 


屏幕 宽度 小 于 600px 且 大 于 400px 时 ， 整 体 页 面 结构 是 从 上 到 下 排列 的 ，logo 在 最 上 
部 ， 接 下 来 是 导航 栏 ， 再 下 面 是 图 片 列表 ， 最 下 面 是 底部 区 域 。 其 中 ， 图 片 列表 每 行 显示 
两 个 图 片 。 风 格 如 图 7-4 中 编号 3 的 效果 所 示 。 样 式 表 设 计 如 下 : 


<style type="text/css" media="screen, projection"> 

@media (min-width:400px) and (max-width: 600px) { 

nav 1i { 
float:]left; 
width:32%; 
margin-left:1%; 

} 

section { 
clear:both; 
padding:20px 0; 

} 

section 1i { 
float:left; 
margin:10px 2px; 
width:48%; 

} 

section 1i span { 
display:block; 
text-align:center; 
font-size:12px; 

i 

1 

</style> 


7. 设计 屏幕 宽度 小 于 400px 的 样式 表 

屏幕 宽度 小 于 400px 时 ， 整 体 页 面 结构 也 是 从 上 到 下 排列 的 ， 与 前 面 不 同 的 是 ， 图 片 
列表 每 行 上 只 显示 一 个 图 片 。 风 格 如 图 7-4 中 编号 4 的 效果 所 示 。 样 式 表 设 计 如 下 : 

<style type="text/css" media="screen, projection"> 


@media (man-width:400px) { 
nav 1i { 


“0 
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float:left; 


width:32%; 
margin-left:1%; 
上 
section { 
clear:both; 


padding:20px 0; 


section li { 
margin:10px 2px; 

|: 

section 1i span { 
display:block; 
text-align:center; 
font-size:12px; 

} 

); 

</style> 

至 此 ， 页 面 设计 完毕 。 当 改变 浏览 器 窗口 的 宽度 时 ， 页 面 会 根据 媒体 查询 的 结果 应 用 

不 同 的 样式 表 ， 页 面 布局 会 发 生 改变 。 


73 小 结 


本 章 主 要 讲解 媒体 查询 及 其 使 用 方法 。 重点 讲解 了 @media 规则 及 其 支持 的 设备 范围 ， 
以 及 如 何 使 用 媒体 查询 。 本 章 的 难点 在 于 对 多 种 设备 的 理解 ， 因 为 读者 可 能 对 很 多 设备 都 
比较 陌生 ， 另 外 使 用 媒体 查询 的 语法 规则 比较 复杂 ， 也 难以 理解 ， 只 有 通过 示例 演示 ， 才 
能 更 好 地 理解 其 语法 规则 。 

下 一 章 将 介绍 HTML 5 的 绘图 功能 一 一 Canvas 绘图 。 


7.4 习 题 


【习题 1】CSS 3 新 增 了 Media Queries (媒体 查询 ) 模块 ， 该 模块 使 用 什么 规则 来 区 别 
媒体 设备 ? 

【习题 2】 简要 说 明 媒体 查询 的 优势 。 

【习题 3】 编写 一 个 包含 媒体 查询 的 页 面 ， 当 尺寸 改变 时 ， 会 呈现 不 同 的 背景 颜色 。 
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MW 第 8 章 绘制 图 形 如 此 简单 


MW 第 9 章 便捷 的 音频 和 视频 


WI 第 10 章 不 可 思议 的 表单 
”第 11 章 可 触 到 的 拖 放 功能 


I 第 12 章 本 地 存储 让 你 的 应 用 更 加 高 效 


MH 第 13 别开生面 的 离线 应 


PD 第 14 章 安全 的 跨 源 通信 


MW 第 15 章 强大 的 WebSocket 双向 通信 
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地 理 位 置 API 


第 8 章 绘制 图 形 如 此 简单 


绘制 图 形 有 很 多 方法 ， 可 以 借助 Flash 实现 ， 也 可 以 使 用 SVG 和 VML 来 绘图 。 本 章 
将 学 习 一 种 新 的 绘图 方法 一 一 使 用 Canvas 元 素 ， 它 是 基于 HTML 5 原生 的 绘图 功能 。 使 
用 Canvas 元 素 ， 可 以 绘制 图 形 ， 也 可 以 实现 动画 。 它 方便 了 使 用 JavaScript 脚本 的 前 端 开 
发 人 员 ， 寥寥 数 行 代码 ， 就 可 以 在 Canvas 元 素 中 实现 各 种 图 像 及 动画 。 本 章 将 介绍 如 何 使 
用 Canvas 元 素来 绘制 一 些 简单 的 图 形 。 


8.1 Canvas 简介 


HTML 5 的 Canvas 元 素 有 一 套 绘 图 API 〈 即 接口 函数 ) ， 自 成 体系 。JavaScript 就 是 
通过 调用 这 些 绘图 API 来 实现 绘制 图 形 和 动画 功能 的 。 


1. Canvas 的 历史 


在 HTML 5 以 前 的 标准 中 , 都 有 一 个 缺陷 , 就 是 不 能 直接 动态 地 在 HTML 页 面 中 绘制 
图 形 。 若 要 在 页 面 中 实现 绘图 , 或 者 是 非常 复杂 的 页 面 实现 (使 用 大 量 的 JavaScript 代码 ) ， 
要 么 借助 第 三 方 工具 实现 〈 如 Flash、SVG、VML 等 ) 。 这 种 做 法 无 疑 把 问题 复杂 化 了 。 
在 互联 网 应 用 不 断 的 发 展 中 ， 页 面 绘图 使 用 得 越 来 越 多 。 未 来 的 发 展 趋势 ， 也 需要 HIML 
自己 完成 绘图 功能 ，Canvas 元 素 应 运 而 生 。 

Canvas 元 素 是 为 了 客户 端 撩 量 图 形 而 设计 的 。 它 自己 没有 行为 ， 但 却 把 一 个 绘图 API 
展现 给 客户 端 JavaScript， 以 使 脚本 能 够 把 想 绘制 的 东西 都 绘制 到 一 块 画布 上 。Canvas 的 
概念 最 初 是 由 苹果 公司 提出 的 ， 并 在 Safaril.3Web 浏览 器 中 首次 引入 。 随 后 Firefox 1.5 和 
Opera 9 两 款 浏 览 器 都 开始 支持 Canvas 绘图 。 目 前 下 9 也 已 经 支持 这 项 功能 。Canvas 的 标 
准 化 由 一 个 Web 浏览 器 厂商 的 非 正式 协会 在 推进 ， 目 前 (Canvas) 已 经 成 为 HTML 5 草案 
中 一 个 正式 的 标签 。 

2. Canvas 和 SVG 及 VML 之 间 的 差异 


Canvas 有 一 个 基于 JavaScript 的 绘图 API， 而 SVG 和 VML 使 用 一 个 XML 文档 来 描 
述 绘图 。Canvas 与 SVG 和 VML 的 实现 方式 不 同 ， 但 在 实现 上 可 以 相互 模拟 。Canvas 有 
自己 的 优势 ， 由 于 不 存储 文档 对 象 ， 性 能 较 好 。 但 若 要 移 除 画布 里 的 图 形 元 素 ， 往 往 需要 
探 掉 绘 图 重新 绘制 它 。 


第 8 章 绘制 图 形 如 此 简单 


8.2 Canvas 基本 知识 


在 网 页 上 使 用 Canvas 元 素 ， 像 使 用 其 他 HIML 标签 一 样 简单 ， 然 后 利用 JavaScript 
脚本 调用 绘图 API， 绘 制 各 种 图 形 。Canvas 拥有 多 种 绘制 路 径 、 和 矩形 、 圆 形 、 字 符 及 添加 
图 像 的 方法 ， 还 能 实现 动画 。 下 面 ， 还 是 让 我 们 从 最 简单 的 开始 吧 。 


8.2.1 构建 Canvas 元 素 


Canvas 元 素 是 以 标签 的 形式 应 用 到 HTML 页 面 里 的 。 在 HTML 页 面 中 放 入 如 下 代码 
即 可 。 

<canvas></canvas> 

不 过 Canvas 元 素 毕 竞 是 个 新 东西 ,很 多 旧 的 浏览 器 都 不 支持 。 为 了 增加 用 户 体 验 ， 可 
以 提供 替代 文字 ， 放 在 Canvas 标签 中 。 例 如 : 

<canvas> 你 的 浏览 器 不 支持 该 功能 ! </canvas> 


当 浏 览 器 不 支持 Canvas 元 素 时 ， 标 签 里 的 文字 就 会 显示 出 来 。 跟 其 他 HTML 标签 一 
样 ，Canvas 标签 有 一 些 共 同 的 属性 : 
<canvas id="canva" width="200" height="200"> 你 的 浏览 器 不 支持 该 功能 ! </canvas> 


其 中 ，id 属性 决定 了 Canvas 标签 的 唯一 性 ， 方 便 查找 。width 和 height 属性 分 别 决定 
了 Canvas 的 宽 和 高 ， 其 数值 代表 Canvas 标签 内 包含 了 多 少 像素 。 

Canvas 标签 可 以 像 其 他 标签 一 样 应 用 CSS 样式 表 。 如 果 在 头 部 的 样式 表 中 添加 如 下 
样式 : 

canvast{ 


border:1lpx solid #ccc; 


| 


那么 该 页 面 中 的 Canvas 标签 将 有 一 个 边框 。 
【示例 8-1】 在 页 面 中 构建 Canvas 元 素 。 


<!DOCTYPEHTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Canvas 标签 使 用 </title> 
<style type="text/css"> 
canvast{ 

border:1px solid #ccc; /* 设置 Canvas 标签 的 边框 样式 */ 
</style> 
</head> 
<body> 
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<canvas id="canva" width="200" height="200"> 你 的 浏览 器 不 支持 该 功能 ! </canvas> 
</body> 
</html> 


运行 结果 如 图 8-1 和 图 8-2 所 示 。 


标签 使 用 - Windows Internet Explorenr =|D| xl 
ttp:/lyxw7401L2-1-1 ] ls x | eno 


i 辣 canvas 标 答 使 用 


同 canvas 标 签 使 用 
€ © | © yxw74012-1-1html 


你 的 浏览 器 不 支持 该 功能 ! 


图 8-1 Canvas 在 浏览 器 中 显示 的 效果 图 8-2 浏览 器 不 支持 Canvas 时 显示 的 效果 


全 提示 : 也 可 以 使 用 CSS 样式 来 控制 Canvas 的 宽 和 高 , 但 Canvas 内 部 的 像素 点 还 是 根据 
Canvas 自身 的 width 和 height 属性 确定 ， 默 认 时 是 宽 300 像素 ， 高 150 像素 。 用 
CSS 设置 Canvas 尺寸 ， 只 能 体现 Canvas 占用 的 页 面 空 间 ， 但 是 Canvas 内 部 的 
绘图 像素 还 是 由 width 和 height 属性 来 决定 的 。 这 样 会 导致 整个 Canvas 内 部 的 图 
像 变形 。 


8.2.2 使 用 JavaScript 实现 绘图 的 流程 


Canvas 元 素 本 身 是 没有 绘图 能 力 的 。 所 有 的 绘制 工作 必须 在 JavaScript 内 部 完成 。 前 
面 讲 过 , Canvas 元 素 提 供 了 一 套 绘图 API。 在 开始 绘图 之 前 , 先 要 获取 Canvas 元 素 的 对 象 ， 
再 获取 一 个 绘图 上 下 文 ， 接 下 来 就 可 以 使 用 绘图 API 中 丰富 的 功能 

1. 获取 Canvas 对 象 

在 绘图 之 前 ， 首 先 需 要 从 页 面 中 获取 Canvas 对 象 。 通 常 使 用 document 对 象 的 
getElementById() 方 法 获取 。 例 如 ， 以 下 代码 获取 id 为 “canvas” 的 Canvas 对 象 。 


Var canvas=document getElementById("canvas") 7 
开发 者 还 可 以 使 用 通过 标签 名 称 来 获取 对 象 的 getElementsByTagName 方法 。 
2. 创建 二 维 的 绘图 上 下 文 对 象 


Canvas 对 象 包含 了 不 同类 型 的 绘图 API, 还 需要 使 用 getContext( 方 法 来 获取 接 下 来 要 
使 用 的 绘图 上 下 文 对 象 。 


Var context=canvas.getContext ("2d"); 
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getContext 对 象 是 内 建 的 HIML 5 对 象 ， 拥 有 多 种 绘制 路 径 、 和 矩形 、 
加 图 像 的 方法 。 参 数 为 “24”， 说 明 接 下 来 将 绘制 的 是 一 个 二 维 图 形 。 
3. 在 Canvas 上 绘制 文字 


设置 绘制 文字 的 字体 样式 、 颜 色 和 对 齐 方式 ， 然 后 将 文字 “加 ”绘制 在 中 央 位 置 。 


// 设 置 字体 样式 、 颜 色 及 对 齐 方式 

context .font="98px 黑体 " ; 

context .fillStyle="#036"; 

context .textAlign="center"; 

/ /绘制 文 字 

context .fillText(" 回 ",100,120,200); 


font 属性 设置 了 字体 样式 。fillStyle 属性 设置 了 字体 颜色 。textAlign 属性 设置 了 对 其 方 
式 。fillText() 方 法 用 填充 的 方式 在 Canvas 上 绘制 了 文字 。 

【示例 8-2】 下 面 的 代码 首先 在 页 面 中 绘制 一 个 边框 为 1 的 Canvas 对 象 ， 并 使 用 
JavaScript 代码 在 其 中 绘制 一 个 大 大 的 “ 回 ” 字 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Canvas 标签 使 用 </title> 
<style type="text/css"> 
canvast{ 

border:1lpx solid #ccc; 


形 、 字 符 及 添 


3 


} 
</style> 
<script type="text/javascript"> 
function DrawText (){ 
Var canvas=document .getElementById("canvas"); 
var Context=canvas .getContext ("2d"); 
// 设 置 字体 样式 、 颜 色 及 对 齐 方式 
context .font="98px 黑体 "; 
context .fillSstyle="#036"; 
context. textAlign="center"; 
// 执 行 绘制 
context .fillText (" 回 ",100,120,200); 
} 
window.addEventListener ("load", DrawText,true); 
</script> 
</head> 
<body style="text-align:center"> 
<canvas id="canvas" width="200" height="200"> 你 的 浏览 器 不 支持 该 功能 ! </canvas> 
</body> 
</html> 


运行 结果 如 图 8-3 所 示 。 
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图 8-3 在 Canvas 中 绘制 的 文字 “ 回 ” 


绘制 出 来 了 ， 这 是 不 同 于 以 往 的 实现 方法 ， 这 是 一 个 很 好 的 开始 。 当 然 ， 这 种 绘制 方 
式 完全 借助 了 绘图 API。 


8.3 使 用 Canvas 绘图 


本 节 将 深入 学 习 使 用 绘图 API。 在 接 下 来 的 小 节 中 将 逐个 演绎 Canvas 的 各 种 绘图 功能 。 
8.3.1 绘制 矩形 


和 矩形 属于 一 种 特殊 而 又 普遍 使 用 的 一 种 图 形 。 和 矩形 的 宽 和 高 ， 就 确定 了 图 形 的 样子 。 
再 给 予 一 个 绘制 起 始 坐 标 ， 就 可 以 确定 其 位 置 。 这 样 整个 矩形 就 确定 下 来 了 ， 本 小 节 详 细 
讲解 矩形 的 绘制 。 绘 图 API 为 绘制 矩形 提供 了 两 个 专用 的 方法 : strokeRect0 和 fillRect()， 
可 分 别 用 于 绘制 矩形 边框 和 填充 矩形 区 域 。 在 绘制 之 前 ， 往 往 需要 先 设置 样式 ， 然 后 才能 
进行 绘制 。 


1. 设置 样式 


关于 和 矩形 可 以 设置 的 属性 有 : 边框 颜色 、 边 框 宽度 、 填 充 的 颜色 等 。 绘 图 API 提供 了 
儿 个 属性 可 以 设置 这 些 样式 ， 属 性 说 明 如 表 8.1 所 示 。 


表 8.1 常用 属性 


属 性 
strokeStyle “| 符合 CSS 规范 的 颜色 值 及 对 象 | 设置 线条 的 颜色 
lineWidth 数字 设置 线条 宽度 ， 默 认 宽度 为 1， 单 位 是 像素 


fillstyle 符合 CSS 规范 的 颜色 值 设置 区 域 或 文字 的 填充 颜色 


其 中 ，strokeStyle 可 设置 矩形 边框 的 颜色 ，lineWidth 可 设置 边框 宽度 ,filStyle 可 设置 
填充 颜色 。 


2. 绘制 矩形 边框 
绘制 矩形 边框 需要 使 用 strokeRect 方法 。 其 语法 如 下 : 
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strokeRect (x,y,width,height); 


其 中 ，width 表示 矩形 的 宽度 ，height 表示 甜 形 的 高 度 ，x 和 y 分 别 是 矩形 起 点 的 横 
标 和 纵 坐 标 。 例 如 ， 以 下 代码 以 (50.50) 为 起 点 绘制 一 个 宽度 为 150， 高 度 为 100 的 矩形 。 
Context . strokeRect (50,50,150,100) 


这 里 仅仅 绘制 了 和 珑 形 的 边框 ， 且 边框 的 颜色 和 宽度 由 属性 strokeStyle 和 lineWidth 来 
指定 。 
3. 填充 矩形 区 域 


填充 矩形 区 域 需 要 使 用 flRect0 方 法 。 其 语法 如 下 : 
fillRect (x,y,width,height); 


该 方法 的 参数 和 strokeRect( 方 法 的 参数 是 一 样 的 , 用 以 确定 矩形 的 位 置 及 大 小 。 例 如 ， 
以 下 代码 以 (50,50) 为 起 点 绘制 一 个 宽度 为 150， 高 度 为 100 的 矩形 。 
context .fillRect(50,50,150,100); 


这 里 填充 了 一 个 矩形 区 域 ， 且 填充 的 颜色 由 属性 fillStyle 来 指定 。 
【示例 8-3】 绘制 一 个 黄色 的 矩形 ， 边 框 为 黑色 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<tit1le> 绘 制 一 个 黄色 的 和 矩形， 边框 为 黑色 </tit1le> 
<style type="text/css"> 
canvas { 
border:1lpx solid #000; 


[2 


人 

</style> 

<script type="text/javascript"> 

function DrawRect (){ 
var canvas=document .getElementById("canvas"); 
var context = canvas.getContext ("2d"); 


/ /绘制 矩形 边框 
context .strokeStyle="#000"; // 设 置 边框 颜色 
context .1ineWidth=17 // 指 定 边框 宽度 
context. strokeRect(50,50,150,100) // 绘 制 矩形 边框 
// 填 充 矩 形 形 状 
Context .fil1Style="#f90"7 // 设 置 填充 颜色 
context.fillRect (50,50,150,100); // 填 充 和 矩形 区 域 
} 
window.addEventListener ("load",DrawRect, true); 
</script> 
</head> 


<body style="overflow:hidden"> 

<canvas id="canvas" width="400" height="300"> 你 的 浏览 器 不 支持 该 功能 ! </canvas> 
</body> 

</html> 


运行 结果 如 图 8-4 所 示 。 
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图 8-4 在 Canvas 中 绘制 矩形 边框 及 填充 效果 

代码 分 析 : 在 绘制 矩形 的 过 程 中 ，strokeRect( 方 法 是 用 来 绘制 边框 的 ，fillRect() 方 法 
是 用 来 填充 区 域 的 , 而 且 各 自 都 指定 了 甜 形 区 域 ,是 两 个 不 同 的 绘图 方法 ,两 个 绘制 过 程 。 
在 这 两 次 绘制 过 程 中 ， 设 置 了 同样 位 置 和 同样 大 小 的 矩形 ， 看 起 来 像 是 在 矩形 框 里 填充 了 
相应 的 颜色 。 

4. 特殊 的 矩形 绘制 方式 

除了 本 节 介 绍 的 两 个 与 矩形 有 关 的 方法 〈 绘 制 矩形 边框 和 填充 矩形 区 域 ) 外 ， 还 有 一 
个 方法 clearRect。 执 行 该 方法 ,将 会 擦 除 指定 的 和 矩形 区 域 ,使 其 变 为 透明 。 使 用 方法 如 下 : 

context.clearRect (x,y,width,height); 

该 方法 中 的 4 个 参数 请 参考 strokeRect0 方 法 和 fillRect0 方 法 ， 代 表 的 意义 一 样 。 加 入 
代码 如 下 : 

context.clearRect (60,60,100,50); 


运行 结果 如 图 8-5 所 示 。 


图 8-5 在 Canvas 中 的 擦 除 效果 
名 提示: 本 节 绘制 矩形 使 用 了 两 种 绘图 方式 : 绘制 线条 和 填充 区 域 。 绘 制 线条 ， 无 论 是 绘 
制 矩形 还 是 其 他 图 形 ， 都 是 类 似 的 用 法 ， 有 共同 的 属性 设置 .。 填充 区 域 ， 也 有 共 
同 的 属性 设置 ， 如 属性 fillStyle， 在 其 他 填充 方式 中 也 需要 用 到 这 个 属性 。 
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8.3.2 ”使 用 路 径 


路 径 就 是 预先 构建 的 图 像 轮 廓 。 它 由 一 个 或 多 个 直线 段 或 曲线 段 组 成 , 可 以 是 开放 的 ， 
也 可 以 是 闭合 的 。 在 很 多 绘图 工具 或 方法 中 都 会 使 用 ， 如 Photoshop 中 的 路 径 。 路 径 会 在 
实际 绘图 前 勾勒 出 图 形 的 轮廓 ， 这 样 就 可 以 绘制 复杂 的 图 形 。 

在 Canvas 中 ， 所 有 基本 图 形 都 是 以 路 径 为 基础 的 ， 我 们 通常 会 调用 lineTo()、rectO、 
arc0 等 方法 来 设置 一 些 路 径 。 在 最 后 使 用 fl10 或 stroke0 方 法 进行 绘制 边框 或 填充 区 域 时 ， 
都 是 参照 这 个 路 径 来 进行 的 。 使 用 路 径 绘 图 基本 上 分 如 下 三 个 步骤 。 

口 创建 绘图 路 径 。 

口 设置 绘图 样式 。 

口 绘制 图 形 。 

与 上 一 节 绘制 矩形 的 方法 对 比 ， 这 里 多 了 创建 绘图 路 径 的 步骤 。 绘 图 API 为 创建 路 径 
提供 了 很 多 宝贵 的 方法 ， 下 面 进行 详细 讲解 。 

1. 创建 绘图 路 径 


创建 绘图 路 径 经 常会 用 到 两 个 方法 beginPathO0 和 closePathO0， 分 别 表 示 开 始 一 个 新 的 
路 径 和 关闭 当前 的 路 径 。 首 先 ， 使 用 beginPath0 方 法 创建 一 个 新 的 路 径 。 该 路 径 是 以 一 组 
子路 径 的 形式 储存 的 ， 它 们 共同 构成 一 个 图 形 。 每 次 调用 beginPath() 方 法 ， 都 会 产生 一 个 
新 的 子路 径 。 语 法 如 下 所 示 : 

context .beginPath (); 

接着 就 可 以 使 用 多 种 设置 路 径 的 方法 。 绘 图 API 提供 了 丰富 的 路 径 方 法 ， 如 表 8.2 
所 示 。 

表 8.2 常用 的 路 径 方法 


方 ” 法 说 ”了 明 
moveTo(x,y) xy 确定 了 起 始 坐标 绘图 开始 的 坐标 
lineTo(x,y) xy 确定 了 直线 路 径 的 目标 坐标 绘制 直线 到 目标 坐标 
x,y 描述 弧 的 圆 形 的 圆心 的 坐标 ; 
ret yi tne 使 用 一 个 中 心 点 和 半径 ,为 一 个 画 
人 > startAngle 圆 弧 的 开始 点 的 角度 ; 布 的 当前 路 径 添 -条 弧 线 圆 形 
startAngle,endAngle, endAngle 圆 弧 的 结束 点 的 角度 三 二 和 仔 状 加 一 条 趾 线 。 品 
counterclockwise) et - 为 弧 形 的 特例 
counterclockwise 逆 时 针 方向 tme， 
顺 时 针 方 向 false 
i 起 点 坐标 ; 
rect(x,y,width,height) 全 开拓 矩 形 路 径 方法 


width,height 描述 矩形 的 宽 和 高 


最 后 ， 使 用 closePath( 方 法 关闭 当前 路 径 。 语 法 如 下 : 


context -closePath () : 


它 会 尝试 用 直线 连接 当前 端点 与 起 始 端点 来 闭合 当前 路 径 ， 但 是 如 果 当 前 路 径 已 经 闭 
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合 或 者 只 有 一 个 点 ， 则 什么 都 不 做 。 
2. 设置 绘图 样式 


设置 绘图 样式 包括 边框 样式 和 填充 样式 。 其 形式 如 下 : 
(1) 使 用 strokeStyle 属性 设置 矩形 边框 的 颜色 ， 设 置 边 框 颜色 为 


context.strokeStyle="#000"; 


(2) 使 用 lineWidth 属性 设置 边框 宽度 ， 设 置 边框 宽 


并 
过 
ULD 
葡 
浏 


context .lineWidth=3; 

(3) 使 用 flStyle 属性 设置 填充 颜色 ， 设 置 填充 颜色 为 橘 黄色: 

context .fil11Style="#f90"7 

3. 绘制 图 形 

路 径 和 样式 都 设置 好 了 ， 最 后 就 是 调用 方法 stroke0 绘 制 边框 ， 或 调用 方法 fl10 填 充 
区 域 。 


context .stroke() // 绘 制 边框 
context .fi11(); // 填 充 区 域 


这 时 ， 图 形 才 实 际 地 绘制 到 canvas 上 去 。 
【示例 8-4】 绘制 一 个 圆 形 和 算 形 车 加 的 图 形 。 


function Draw(){ 


Var canvas=document .getElementById("canvas"); 
Var context = canvas .getContext ("2d"); 


// 创 建 绘图 路 径 

context .beginPath () : // 创 建 一 个 新 的 路 径 
context.arc(150,100,50,0,Math.PI*2,true) ; // 圆 形 路 径 
context.rect (50,50,100,100); // 和 矩形 路 径 


context .closePath(); 


// 设 置 样式 

context.strokeStyle="#000"; // 设 置 边框 颜色 
context .lineWidth=3; // 设 置 边框 宽度 
context .fillstyle="#f£90"; // 设 置 填充 颜色 
// 填 充 矩 形 形 状 

Context. stroke () : // 绘 制 边框 
context .fill(); // 填 充 区 域 


} 


全 提示 : 在 示例 8-4 中 ， 仅 列 出 了 核心 的 脚本 代码 。 因 为 页 面 的 其 他 部 分 是 不 变 的 ， 只 有 
绘图 过 程 ， 因 绘制 不 同 的 图 形 才 会 改变 。 为 节省 篇 幅 ， 只 保留 JavaScript 代码 。 


运行 结果 如 图 8-6 所 示 。 
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图 8-6 圆 形 和 算 形 车 加 效果 
代码 分 析 : 在 创建 路 径 的 过 程 中 ， 分 别 使 用 了 arc 方法 和 rect 方法 ， 创 建 了 一 个 圆 形 
和 一 个 和 矩形, 并且 其 中 有 重 登 的 部 分 为 空白 。 最 后 调用 了 方法 stroke0 和 方法 flO， 完 成 了 
边框 的 绘制 及 区 域 填 充 。 
现在 理解 一 下 重 受 的 空白 部 分 。 修 改 一 下 圆 形 路 径 的 参数 ， 如 下 : 
context .arc(100,100,30,0,Math.PI*2,true) ; // 圆 形 路 径 


运行 结果 如 图 8-7 所 示 。 


图 8-7 圆 形 和 和 矩形 合 加 效果 


从 图 8-7 中 更 容易 理解 ， 填 充 的 部 分 为 矩形 和 圆 形 之 间 的 区 域 ， 而 这 部 分 区 域 正 是 路 
径 所 确定 的 区 域 。 即 可 以 这 样 理解 ， 当 两 个 图 形 路 径 重 登 时 ， 重 县 区 域 则 被 排除 在 路 径 确 
定 的 区 域 之 外 。 


4. 深入 理解 路 径 特性 


在 创建 子路 径 的 三 个 步骤 中 ， 展 示 的 是 一 个 标准 的 子路 径 创 建 过 程 。 如 果 绘 制 复杂 的 
图 形 ， 标 准 化 的 方法 有 利于 代码 的 规范 和 管理 。 

(1) 理解 一 下 beginPath0 方 法 的 作用 。 

使 用 beginPath0 方 法 ， 可 以 新 建 一 个 子路 径 ， 接 下 来 的 绘制 ， 都 是 针对 该 子路 径 进行 
的 。 如 果 不 使 用 该 方法 ， 那 么 设置 的 路 径 和 前 面 的 路 径 设 置 默 认为 同一 个 路 径 设 置 。 在 接 
下 来 的 绘制 中 ， 前 面 设置 的 路 径 会 被 重复 绘制 。 

为 了 体现 重复 绘制 的 区 别 ， 接 下 来 ， 会 使 用 半 透 明 的 颜色 样式 设置 。 下 面 就 使 用 路 径 
绘图 的 方法 分 别 绘制 两 个 圆 形 ， 填 充 为 半 透 明 的 颜色 ， 代 码 如 示例 8-5 所 示 。 
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【示例 8-5】 绘制 两 个 半 透 明 的 圆 形 。 


function Draw(){ 
Var canvas=document .getElementById("canvas"); 
Var context = canvas.getContext ("2d"); 


// 绘 制 第 一 个 圆 形 

context.beginPath() 
context.arc(150,100,50,0,Math.PI*2,true); 
context .fillSstyle="rgba (255,135,0,0.4)"; 
context .fil1] (); 


// 绘 制 第 二 个 圆 形 
context .beginPath(); 
context .arc(170,120,50,0,Math.PI*2,true); 
context .fillSstyle="rgba (255,135,0,0.4)"; 
context .fil] (); 

| 


运行 结果 如 图 8-8 所 示 。 如 果 去 掉 示例 8-5 中 的 beginPath() 方 法 ， 运 行 结果 如 图 8-9 


Da ~ ~ 
图 8-8 绘制 的 两 个 半 透 明 的 圆 形 图 8-9 绘制 的 两 个 半 透 明 的 圆 形 


代码 分 析 : 在 图 8-8 中 ， 通 过 两 个 子路 径 ， 绘 制 了 两 个 圆 形 ， 两 个 圆 形 重合 部 分 的 颜 
色 登 加 显示 。 在 图 8-9 中 ， 去 除了 beginPath(0 方 法 ， 绘 制图 形 时 就 不 再 创建 子路 径 。 第 一 
个 圆 形 ， 在 执行 过 程 中 ， 将 被 填充 两 次 。 所 以 ， 按 照 规 范 的 绘制 方法 ， 可 以 防止 绘图 混乱 ， 
以 至 于 绘制 出 意 想 不 到 的 图 形 。 不 过 某 种 情况 下 ， 也 许可 以 利用 这 一 特性 。 

(2) 理解 一 下 closePath( 方 法 的 作用 。 

closePath() 方 法 是 用 来 闭合 路 径 的 。 如 果 前 面 设置 的 路 径 是 开放 的 ，closePath() 方 法 会 
自动 用 直线 连接 终点 和 起 点 。 同 样 ， 使 用 路 径 的 方法 绘制 两 条 直线 。 使 用 moveTo(x,y) 方 法 
设置 当前 坐标 位 置 ， 使 用 lineTo(x, y) 方 法 为 当前 子路 径 添加 一 条 直线 。 

【示例 8-6】 绘制 两 条 直线 。 


function DrawLine(){ 
Var canvas=document .getElementById("canvas"); 
var context = canvas.getContext ("2d"); 
/ /创建 绘制 过 程 
context .beginPath () 
Context .moveTo (50,50) 
Context -1ineTo(120,120) : 
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context.lineTo (120, 60); 
context .closePath(); 
context.strokeStyle ="#000"; 


// 执 行 绘制 


context.stroke(); 


运行 结果 如 图 8-10 所 示 。 如 果 去 掉 示例 8-6 中 的 closePath0 方 法 ， 运 行 结果 如 图 8-11 
所 示 。 


图 8-10 绘制 两 条 直线 (闭合 路 径 》 图 8-11 绘制 两 条 直线 (开放 路 径 》 
代码 说 明 : 方法 closePathO0， 会 自动 用 一 条 直线 连接 路 径 的 起 始点 ， 以 完成 路 径 的 闭 
合 。 如 果 需 要 绘制 一 个 开放 的 路 径 ， 就 不 要 使 用 它 了 。 


外 提示 : closePath() 方 法 习惯 性 地 放 在 路 径 设置 的 最 后 一 步 ， 切 勿 认为 是 路 径 设置 的 结 
因为 在 此 之 后 ， 还 可 以 继续 设置 路 径 。 


8.3.3 图 形 组 合 


通常 ， 会 把 一 个 图 像 绘制 在 另 一 个 图 形 之 上 ， 称 之 为 图 形 组 合 。 默 认 的 情况 是 上 面 的 

图 形 履 盖 了 下 面 的 图 形 ， 这 是 由 于 图 形 组 合 默 认 地 设置 了 “source-over”。 

在 Canvas 中 ， 可 通过 属性 globalCompositeOperation 来 设置 如 何在 画布 上 组 合 颜色 ， 

总 共有 12 种 组 合 类 型 。 语 法 如 下 : 

globalCompositeOperation= [value]; 

参数 说 明 : 参数 value 的 合法 值 有 12 个 ， 决 定 了 12 种 图 形 组 合 类 型 ， 默 认 值 是 
“source-over”。12 种 组 合 类 型 如 表 8.3 所 示 。 

表 8.3 组 合 类 型 值 的 含义 


值 含 义 
copy 只 绘制 新 图 形 ， 删 除 其 他 所 有 内 容 
darker 在 图 形 重 每 的 地 方 ， 颜 色 由 两 个 颜色 值 相 减 后 决定 


已 有 的 内 容 只 在 它 和 新 的 图 形 重 辣 的 地 方 保留 。 新 图 形 绘制 于 内 容 之 后 
在 新 图 形 以 及 已 有 画布 重合 的 地 方 ， 已 有 内 容 都 保留 。 所 有 其 他 内 容 成 为 透明 的 
在 已 有 内 容 和 新 图 形 不 重 伏 的 地 方 ， 已 有 内 容 保 留 。 所 有 其 他 内 容 成 为 透明 的 


destination-atop 


destination-in 


destination-out 
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值 含义 
destination-over | 新 图 形 绘制 于 已 有 内 容 的 后 面 
lighter 在 图 形 重合 的 地 方 ， 颜 色 由 两 种 颜色 值 的 加 值 来 决定 
source-atop 只 有 在 新 图 形 和 已 有 内 容重 苹 的 地 方 ， 才 绘制 新 图 形 
source-in 只 有 在 新 图 形 和 已 有 内 容重 羡 的 地 方 ， 新 图 形 才 绘 制 。 所 有 其 他 内 容 成 为 透明 的 
source-out 只 有 在 和 已 有 图 形 不 重合 的 地 方 ， 才 绘制 新 图 形 
source-Over 新 图 形 绘制 于 已 有 图 形 的 顶部。 这 是 默认 的 行为 
XOT 在 重合 和 正常 绘制 的 其 他 地 方 ， 图 形 都 成 为 透明 的 


【示例 8-7】 多 样 化 的 图 形 组 合 。 


function Draw(){ 
Var canvas=document .getElementById("canvas"); 
var context = canvas.getContext ("2d"); 
//source-over 
context .globalCompositeOperation = "source-over"; 
RectArc (context); 
//lighter 
context .globalCompositeOperation = "lighter"; 
context.translate (90,0); 
RectArc (context); 
//xor 
context .globalCompositeOperation = "xor"; 
context.translate(-90, 90); 
RectArc (context); 
//destination-over 
context .globalCompositeOperation = "destination-over"; 
context.translate (90,0); 
RectArc (context); 

} 

/ /绘制 组 合 图 形 

function RectArc(context){ 
context .beginPath(); 
context .rect (10,10,50,50); 
context .fillStyle = "#F90"; 
context .fill(); 
context .beginPath(); 
context .arc(60,60,30,0,Math.PI*2,true); 
context .fillSstyle = "#0f0"; 
context .fill(); 

| 


运行 结果 如 图 8-12 所 示 。 

代码 分 析 : 函数 RectArc(context) 是 用 来 绘制 组 合 图 形 的 ， 使 用 方法 translate0 移 动 不 
同 的 位 置 , 连续 绘制 了 4 种 组 合 图 形 : source-over、lighter、xor、destination-over， 由 图 8-12 
可 见 组 合 效果 。 关 于 方法 translate0， 将 在 后 面 的 章节 中 讲解 。 
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外 提示 : 关于 这 12 种 图 形 组 合 方式 ， 应 参照 表 8.3 中 的 描述 。 在 示例 8-7 中 列 出 的 4 种 组 
合 方式 ， 在 各 个 浏览 器 中 的 效果 基本 一 致 ， 其 他 图 形 组 合 方式 ， 在 各 个 浏览 器 中 
都 有 不 同 程度 的 偏差 或 不 一 致 。 虽 然 这 是 一 个 很 好 的 功能 ， 但 在 实际 开发 中 应 考 
虑 不 同 浏览 器 的 兼容 性 。 


a 区 lighter 
A 团 . 


图 8-12 ” 圆 形 和 和 矩形 登 加 效果 


8.3.4 绘制 曲线 


在 实际 的 绘图 中 ， 绘 制 曲线 是 常用 的 一 种 绘图 形式 。 我 们 在 设置 路 径 的 时 候 ， 需 要 使 
用 一 些 曲 线 方法 来 勾勒 出 曲线 路 径 ， 以 完成 曲线 的 绘制 。 在 Canvas 中 ， 绘 图 API 提供 了 
多 种 曲线 绘制 方法 。 主 要 的 曲线 绘制 方法 有 arcO0 、arcTo0 、quadraticCurveTo0 、 
bezierCurveTo() 等 。 


1. 使 用 中 心 点 和 半径 绘制 弧 线 一 一 arc() 方 法 


在 上 一 节 中 ， 已 经 在 应 用 arc(0 方 法 绘制 圆 形 。 该 方法 是 使 用 中 心 点 和 半径 ， 为 一 个 画 
布 的 当前 路 径 添加 一 条 弧 线 。 语 法 如 下 : 


arc(x, y, radius, startAngle,endAngle, counterclockwise); 


参数 说 明 : x 和 y 描述 弧 的 圆 形 的 圆心 坐标 。radius 描述 弧 的 圆 形 的 半径 。startAngle 
是 圆 弧 的 开始 点 的 角度 。endAngle 是 圆 弧 的 结束 点 的 角度 。counterclockwise 逆 时 针 方 向 为 
true， 顺 时 针 方 向 为 false。 

如 图 8-13 所 示 ， 圆 心 由 参数 x 和 yy 来 确定 ， 半 径 由 参数 radius 确定 ， 圆 弧 的 开始 点 的 
角度 StartAngle 和 结束 点 的 角度 EndAngle 如 图 8-13 中 的 第 头 标注 所 示 ， 体 现 的 是 一 个 逆 
时 针 方 向 的 绘制 。 其 中 ， 沿 着 x 轴 正 半 轴 的 三 点 钟 方向 的 角度 为 0。 

【示例 8-8】 使 用 arc0 方 法 绘制 一 条 弧 线 。 


function Draw(){ 
Var canvas=document .getElementBylId("canvas"); 
var context = canvas.getContext ("2d"); 
// 先 绘制 一 个 灰色 的 圆 形 


context .beginPath () 
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context.arc(150,100,50,0,Math.PI*2,true); 

// 绘 制 一 个 圆心 为 (150, 100)， 半 径 为 50 的 圆 形 
context .fillSstyle="rgba (0,0,0,0.1)"; // 设 置 填充 为 黑色 ， 透 明度 为 0.1 
context .fil11(); // 填 充 arc () 方法 确定 的 区 域 
// 再 绘制 一 条 圆 弧 ， 宽 5 像素 ， 线 条 颜色 为 桶 黄色 
context .beginPath () 7 
context .arc(150,100,50,0, (-Math.PI*2/3) ,true) : 

/7 绘制 一 个 圆心 为 (150,100) ， 半 径 为 50 的 圆 弧 
context. strokeStyle="rgba(255,135,0,1)";  // 设 置 边框 颜色 为 橘 黄色 
context.lineWidth=5; // 设 置 边 框 宽度 为 5 像素 
context .stroke (); // 绘 制 arc () 方 法 确定 的 区 域 边框 


运行 结果 如 图 8-14 所 示 。 


1.5P1 
EndAngle 
半径 StartAngle i 
1P1 男人 a OP1 
0.5P1 
图 8-13 ”arc0 方 法 绘制 弧 线 原理 解析 图 图 8-14 使 用 arc0 方 法 绘制 一 条 橘 黄色 的 弧 线 


代码 分 析 : 为 了 更 好 地 说 明 问题 ， 同 时 绘制 一 个 灰色 的 圆 形 ， 圆 形 的 圆心 坐标 和 半径 
与 弧 线 相同 ， 弧 线 的 线条 宽 5 像素 ， 线 条 颜色 为 桶 黄色。 在 绘制 弧 线 的 时 候 ， 仅 用 arc( 方 
法 就 完成 路 径 的 设置 ， 与 其 他 路 径 的 绘制 一 样 ， 需 要 先 设置 填充 样式 或 边框 样式 ， 最 后 执 
行 填充 或 绘制 。 绘 制 弧 线 ， 不 依赖 于 绘制 起 点 ， 即 不 需要 使 用 moveTo0 方 法 来 确定 绘制 


2. 使 用 辅助 线 绘制 弧 线 一 一 arcTo() 方 法 


arcTo() 方 法 是 使 用 切线 的 方法 绘制 弧 线 ， 使 用 两 个 目标 点 和 一 个 半径 ， 为 当前 的 子路 
径 添 加 一 条 弧 线 。 与 arc0 方 法 相 比 ， 同 样 是 绘制 弧 线 ， 绘 制 思 路 及 侧重 点 不 一 样 。 语 法 
如 下 : 

RE 


参数 说 明 : xl,71 描述 了 一 个 坐标 点 ， 用 P1 表示 。x2, y2 描述 了 另 一 个 坐标 点 ， 用 P2 
表示 。radius 描述 弧 的 圆 形 的 半径 。 如 图 8-15 所 示 ， 有 一 个 绘制 的 起 点 〈 即 当前 位 置 ) ， 
通常 会 使 用 moveTo( 方 法 来 指定 。P1 点 由 参数 x1, y1 确定 。P2 点 由 参数 x2, ?2 确定 。 半 
径 由 参数 radius 确定 。 

添加 给 路 径 的 圆 弧 是 具有 指定 radius 的 圆 的 一 部 分 。 圆 弧 有 一 个 点 与 起 点 到 P1 的 线 
段 相 切 〈 如 图 8-15 所 示 的 切 点 1) ， 还 有 一 个 点 和 从 Pl 到 P2 的 线段 相 切 (如 图 8-15 所 
示 的 切 点 2) 。 这 两 个 切 点 就 是 圆 弧 的 起 点 和 终点 ， 圆 弧 绘 制 的 方向 就 是 连接 这 两 个 点 的 
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癫 
辣 
| 


弧 的 方向 。 


圆心 
图 8-15 ”arcTo0 方 法 绘制 弧 线 原理 解析 图 


从 某 种 意义 上 讲 ， 使 用 arcTo0 方 法 绘制 圆 弧 借 助 了 两 条 辅助 线 。 下 面 使 用 arcTo0 方 
法 来 绘制 一 条 弧 线 。 

【示例 8-9】 使 用 arcTo() 方 法 绘制 一 条 弧 线 。 

function Draw(){ 


Var canvas=document .getElementById("canvas"); 
Var context = canvas.getContext ("2d"); 


// 先 绘制 灰色 的 辅助 线段 ， 宽 2 像素 


context .beginPath(); // 添 加 第 一 个 子路 径 

context .moveTo (80,120); // 确 定 当前 位 置 ， 即 绘图 起 始 的 位 置 
context.lineTo(150, 60); // 到 P1 点 的 直线 
context.lineTo (180,130); // 到 P2 点 的 直线 

context .strokeStyle="rgba (0,0,0,0.4)"; // 线 框 颜色 为 黑色 ， 透 明度 为 0.4 
context .lineWidth=2; // 线 框 宽度 为 2 像素 


context.stroke (); 


// 再 绘制 一 条 圆 弧 ， 宽 2 像素 ， 线 条 颜色 为 橘 黄色 


context .beginPath(); // 添 加 第 二 个 子路 径 
context .moveTo (80,120); // 确 定 当前 位 置 ， 与 第 一 个 子路 径 一 致 


context .arcTo(150，60，180，130，50) ; /VarcTo () 方 法 确定 弧 线 轮廓 


context .strokeStyle="rgba (255,135,0,1)"; ， // 线 框 颜色 为 橘 黄色 
Context. stroke () 


1 
运行 结果 如 图 8-16 所 示 。 


图 8-16 ”使 用 arcTo0 方 法 绘制 一 条 橘 黄色 的 弧 线 
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代码 分 析 : 图 8-16 中 的 黄色 部 分 为 绘制 的 圆 弧 部 分 。 由 于 该 绘制 弧 线 的 方法 是 通过 与 
辅助 线段 相 切 来 完成 的 ， 所 以 将 与 弧 线 相 切 的 辅助 线段 也 绘制 出 来 。 在 绘制 弧 线 的 时 候 ， 
先 通过 moveTo0 方 法 确定 了 绘制 起 点 。 该 起 点 会 与 圆 弧 的 第 一 个 切 点 连接 起 来 。 可 以 发 现 
图 8-16 中 的 橘 黄色 线条 有 一 段 是 直线 。 


3. 绘制 二 次 样 条 曲线 一 一 quadraticCurveTo() 方 法 


二 次 样 条 曲线 是 曲线 的 一 种 ，Canvas 绘图 API 专门 提供 了 此 曲线 的 绘制 方法 。 
quadraticCurveTo() 方 法 为 当前 的 子路 径 添加 一 条 二 次 样 条 曲线 。 语 法 如 下 : 


quadraticCurveTo (CPX， cpY,x,y); 


参数 说 明 : cpX、cpY 描述 了 控制 点 的 坐标 ; x、y 描述 了 曲线 的 终点 坐标 。 

如 图 8-17 所 示 ， 起 点 即 当前 的 位 置 ， 控 制 点 由 参数 cpX、cpY 确定 ， 终 点 由 参数 x、y 
确定 。 这 条 橘 黄色 的 曲线 就 是 从 起 点 连接 到 终点 ， 而 控制 点 可 以 控制 起 点 和 终点 之 问 的 曲 
线 的 形状 。 


控制 点 


MA 


起 点 
终点 


图 8-17 二 次 样 条 曲线 原理 解析 图 


下 面 使 用 quadraticCurveTo() 方 法 来 绘制 一 条 曲线 。 
【示例 8-10】 绘制 二 次 样 条 曲线 。 
function Draw(){ 


Var canvas=document .getElementById("canvas"); 
Var context = canvas.getContext ("2d"); 


// 先 绘制 灰色 的 辅助 线段 ， 宽 3 像素 


context .beginPath(); // 添 加 第 一 个 子路 径 

context .moveTo (100,180); // 确 定 当前 位 置 ， 即 绘图 起 始 的 位 置 
context .lineTo (200, 50); // 直 线 连接 控制 点 
context.lineTo (300,200); // 直 线 连接 终点 


context .strokeStyle="rgba (0,0,0,0.4)"; // 线 框 颜色 为 黑色 ， 透 明度 为 0.4 
context .1ineWidth=37 

Context .stroke (); 

// 再 绘制 一 条 曲线 ， 宽 3 像素 ， 线 条 颜色 为 橘 黄色 

context .beginPath () // 添 加 第 二 个 子路 径 

context .moveTo (100, 180); // 确 定 当前 位 置 ， 与 第 一 个 子路 径 一 至 
context .quadraticCurveTo(200，50，300，200) ; “ // 确 定 曲线 轮廓 
context.lineWidth = 37 

context .strokeStyle="rgba (255,135,0,1)"; // 线 框 颜色 为 橘 黄色 
Context . Stroke () 
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运行 结果 如 图 8-18 所 示 。 


图 8-18 绘制 的 二 次 样 条 曲线 


代码 分 析 : 由 于 该 方法 使 用 了 两 个 坐标 点 ， 我 们 将 这 些 点 用 直线 连接 起 来 ， 以 辅助 理 
解 。 在 绘制 曲线 的 时 候 ， 先 通过 moveTo() 方 法 确定 绘制 起 点 。 图 8-18 中 的 黄色 部 分 为 给 
制 的 曲线 部 分 ， 连 接 了 曲线 的 起 点 和 终点 ， 曲 线 的 弯曲 形状 ， 由 控制 点 控制 。 


外 提示 : 样 条 曲线 是 数学 中 的 概念 ， 已 超出 我 们 的 研究 范围 , 有 兴趣 的 话 可 以 去 研究 一 下 。 


4. 绘制 贝 塞 尔 曲线 一 一 bezierCurveTo() 方 法 


贝 塞 尔 曲 线 ， 又 称 贝 效 曲线 或 贝 济 埃 曲线 ， 是 应 用 于 二 维 图 形 应 用 程序 的 数学 曲线 。 
Canvas 绘图 API 也 提供 了 贝 塞 尔 的 绘制 方法 bezierCurveTo0。 与 二 次 样 条 曲线 相 比 ， 贝 塞 
尔 曲 线 使 用 了 两 个 控制 点 ， 从 而 读者 可 以 创建 更 复杂 的 曲线 图 形 。 语 法 如 下 : 


bezierCurveTo(cplX, cplY, cp2X, cp2Y,x,y); 


参数 说 明 : cplX、cplY 描述 了 第 一 个 控制 点 的 坐标 ，cp2X、cp2Y 描述 了 第 二 个 控制 
点 的 坐标 ，x、y 描述 了 曲线 的 终点 坐标 。 

如 图 8-19 所 示 ， 起 点 即 当前 的 位 置 ， 控 制 点 1 由 参数 epIX、cplY 确定 ， 控 制 点 2 由 
参数 cp2X、cp2Y 确定 , 终点 由 参数 x、y 确定。 这 条 橘 黄色 的 曲线 就 是 从 起 点 连接 到 终点 ， 
由 两 个 控制 点 联合 控制 的 曲线 形状 。 

控制 点 1 


控制 点 2 


起 点 
图 8-19 贝 塞 尔 曲线 原理 解析 图 
【示例 8-11】 绘制 贝 塞 尔 曲 线 。 
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Eunction Draw(){ 
Var canvas=document .getElementBylId("canvas"); 
var context = canvas.getContext ("2d"); 


// 先 绘制 灰色 的 辅助 线段 ， 宽 2 像素 


context .beginPath(); // 添 加 第 一 个 子路 径 

context .moveTo (100,180); // 确 定 当前 位 置 ， 即 绘图 起 始 的 位 置 
context.1ineTo (110,80) // 直 线 连接 控制 点 

context .moveTo (260,100) // 移 动 当前 位 置 

Context .1ineTo (300,200) // 直 线 连接 终点 


context. strokeStyle="rgba(0,0,0,0.4)"; // 线 框 颜色 为 黑色 ， 透 明度 为 0.4 
context.lineWidth=3; 
context .stroke (); 


// 再 绘制 一 条 曲线 ， 宽 3 像素 ， 线 条 颜色 为 橘 黄色 


context .beginPath () 7 // 添 加 第 二 个 子路 径 
context .moveTo (100, 180); // 确 定 当前 位 置 ， 与 第 一 个 子路 径 一 致 


context .bezierCurveTo (110, 80, 260, 100, 300, 200); // 确 定 曲线 轮廓 
context.lineWidth = 3; 


context .strokeStyle="rgba (255,135,0,1)"; // 线 框 颜色 为 桶 黄色 
Context .stroke () 


运行 结果 如 图 8-20 所 示 。 


图 8-20 绘制 的 贝 塞 尔 曲 线 


代码 分 析 : 在 绘制 辅助 线 的 时 候 , 连接 了 起 点 和 第 一 个 控制 点 ， 第 二 个 控制 点 和 终点 。 
图 8-20 中 的 黄色 线条 部 分 为 绘制 的 曲线 部 分 ,连接 了 曲线 的 起 点 和 终点 ， 曲 线 的 弯曲 形状 
由 其 中 的 两 个 控制 点 共同 控制 。 


全 提示 : 关于 贝 塞 尔 曲线 的 变形 原理 ， 也 已 超出 我 们 的 研究 范围 。 在 这 里 ， 只 要 搞 明白 如 
林 绘 制 贝 塞 尔 曲线 即 可 。 


8.3.5 ”使 用 图 像 
有 的 时 候 ， 可 能 需要 借助 一 些 现 有 的 图 片 ， 使 绘图 更 加 灵活 和 方便 。 在 Canvas 中 , 绘 
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图 API 已 经 提供 了 插入 图 像 的 方法 ， 只 需 几 行 代码 就 能 将 图 像 绘制 到 画布 上 。 使 用 
drawImage() 方 法 可 将 图 像 添加 到 Canvas 画布 中 ， 即 绘制 一 幅 图 像 ， 该 方法 重 载 了 三 次 。 

(1) 把 整个 图 像 复 制 到 画布 ， 将 其 放置 到 指定 点 的 左上 角 ， 并 且 将 每 个 图 像 像素 映射 
成 画布 坐标 系统 的 一 个 单元 。 语 法 如 下 : 


drawImage (image, x, y) 


参数 说 明 : image 表示 所 要 绘制 的 图 像 的 对 象 ，x、y 表示 要 绘制 的 图 像 的 左上 角 的 
位 置 。 

(2) 把 整个 图 像 复制 到 画布 ， 但 是 允许 用 画布 单位 来 指定 想 要 的 图 像 的 宽度 和 高 度 。 
语法 如 下 : 

drawImage (image, x, y, width, height) 


参数 说 明 : image 表示 所 要 绘制 的 图 像 的 对 象 ，x、y 表示 要 绘制 的 图 像 的 左上 角 的 位 
置 ，width、height 表示 图 像 所 应 绘制 的 尺寸 ， 指 定 这 些 参数 使 得 图 像 可 以 缩放 。 

(3) 此 方法 是 完全 通用 的 ， 它 允许 指定 图 像 的 任何 矩形 区 域 并 复制 它 ， 对 画布 中 的 任 
何 位 置 都 可 进行 任何 的 缩放 。 语 法 如 下 : 

drawImage (Image，sourceX，sourceY，sourceWidth，sourceHeight，destX，destY， 

destWidth, destHeight) 

参数 说 明 : image 表示 所 要 绘制 的 图 像 的 对 象 。sourceX、sourceY 表示 图 像 将 要 被 给 
制 的 区 域 的 左上 角 ， 这 些 整 数 参 数 用 图 像 像 素来 度量 。sourceWidth、sourceHeight 表示 图 
像 所 要 绘制 区 域 的 大 小 ， 用 图 像 像 素 表 示 。destX、destY 表示 所 要 绘制 的 图 像 区 域 的 左上 
角 的 画布 坐标 。destWidth、destHeight 图 像 区 域 所 要 绘制 的 画布 大 小 。 

以 上 三 个 方法 中 的 参数 image， 都 表示 所 要 绘制 的 图 像 对 象 ， 必 须 是 Image 对 象 或 
Canvas 元 素 。 一 个 Image 对 象 能 够 表示 文档 中 的 一 个 <img> 标 记 或 者 使 用 ImageO 构 造 函 数 
所 创建 的 一 个 屏幕 外 图 像 。 

三 种 方法 中 ， 第 一 种 方法 参数 最 少 ， 所 以 最 简单 ， 但 实现 的 功能 有 限 。 第 二 种 方法 复 
杂 一 点 ， 功 能 仍然 受 限 。 第 三 种 方法 ， 参 数 最 多 最 复杂 ， 能 对 图 像 进行 裁剪 等 操作 。 在 绘 
图 中 ， 根 据 实际 需要 ， 可 以 从 以 上 三 种 方法 中 自由 选择 。 

【示例 8-12】 使 用 三 种 方法 插入 图 像 。 

function Draw(){ 

var canvas=document .getElementById("canvas"); // 获 取 canvas 对 象 
var context = canvas.getContext ("2d"); // 获 取 2d 上 下 文 绘图 对 象 
var newImg = new Image(); // 使 用 Image () 构造 函数 创建 图 像 对 象 
newImg.src= "../images/Chaplin.jpg";  ”// 指 定 图 像 的 文件 地 址 
newImg.onload=function(){ 
context .drawImage (newImg,0,0); // 从 左上 角 开 始 绘制 图 像 
context .drawImage (newImg,250,100,150,200); 
// 从 指定 坐标 开始 绘制 图 像 ， 并 设置 图 像 的 宽 和 高 
context .drawImage (newImg, 90,80,100,100,0,0,120,120); 
// 裁 剪 一 部 分 图 像 放 在 左上 角 ， 并 稍微 放大 
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果 如 图 8-21 所 示 。 


网 
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图 8-21 使 用 三 种 方法 插入 图 像 


代码 分 析 : 在 示例 8-12 中 ,使 用 了 三 种 插入 图 像 的 方法 。 由 于 参数 的 个 数 及 表示 的 意 
义 不 同 , 所 以 可 以 灵活 运用 其 特性 , 选择 使 用 。 绘 制图 像 的 代码 包含 在 onload 处 理 函 数 中 ， 
是 因为 图 像 本 身 需要 时 间 加 载 ， 在 加 载 完成 之 前 ， 图 像 是 不 能 被 绘制 的 。 

图 8-21 中 的 图 像 ， 满 画布 的 图 像 是 用 第 一 种 方法 绘制 的 。 右 下 角 的 图 像 是 用 第 二 种 方 
法 绘制 的 。 左 上 角 的 头像 是 用 第 三 种 方法 绘制 的 。 


全 提示 : 在 插入 图 像 之 前 ， 需 考虑 图 像 加 载 的 时 间 。 如 果 图 像 没 加 载 完 成 就 已 经 执行 了 
drawImage() 方 法 , 则 不 会 显示 任何 图 片 . 在 示例 8-12 中 ,为 图 像 对 象 添加 了 onload 
处 理 函 数 ， 以 保证 在 图 像 加 载 完 成 后 执行 drawImage() 方 法 。 


8.3.6 ”剪裁 区 域 


在 路 径 绘图 中 , 我 们 使 用 了 两 大 绘图 方法 , 即 用 于 绘制 线条 的 stroke0 方 法 和 用 于 填充 
区 域 的 fl10 方 法。 关于 路 径 的 处 理 ， 还 有 一 种 方法 叫做 剪裁 方法 clip0。 

说 起 剪裁 ， 大 多 数 人 会 想到 前 裁 图 片 ， 即 保留 图 片 的 一 部 分 。 但 是 剪裁 的 实现 方法 是 
另 一 种 思维 。 

比如 在 火车 上 ， 乘 客 会 通过 车 窗 欣赏 外 面 的 风景 ， 但 会 受到 车 窗 的 限制 ， 只 能 看 很 小 
ee 外 面 的 风景 好 比 画 布 ， 车 窗 就 好 比 一 个 裁剪 的 区 域 ， 无 论 画 布 里 的 风景 如 何 
绘制 ， 却 只 能 在 裁剪 区 域 里 表现 出 来 ， 裁 前 区 域外 是 没有 任何 变化 的 。 也 可 以 理解 为 ， 在 
wa 

而 裁剪 区 域 是 通过 路 径 来 确定 的 。 和 绘制 线条 的 方法 和 填充 区 域 的 方法 一 样 ， 也 需要 
预先 确定 绘图 路 径 ， 再 执行 剪裁 路 径 方法 clip0， 这 样 就 确定 了 剪裁 区 域 。 剪 裁 区 域 的 语法 
如 下 : 


clip(); 
该 方法 没有 参数 ， 在 设置 路 径 之 后 执行 。 
【示例 8-13】 使 用 裁剪 区 域 绘图 。 


function Draw(){ 
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Var canvas=document .getElementById("canvas"); 
var context = canvas.getContext ("2d"); 
Var newImg = new Image(); 
newImg.src= "../images/Chaplin.jpg"; 
newImg.onload=function(){ 
// 设 置 一 个 圆 形 的 剪裁 区 域 
ArcClip (context) 
// 从 左上 角 开 始 绘制 图 像 
context .drawImage (newImg, 0,0); 
// 设 置 全 局 半 透 明 
context .globalAlpha=0.6; 
// 使 用 路 径 绘制 的 矩形 
FillRect (context) 
} 
. 
// 设 置 一 个 圆 形 的 剪裁 区 域 
function RARrcClip (context){ 
context .beginPath () 7 


context .arc(150,150,100,0,Math.PI*2,true) : // 设 置 一 个 圆 形 的 绘图 路 径 
context.clip() // 剪 裁 区 域 

} 

// 使 用 路 径 绘制 的 矩形 


function FillRect (context){ 
context .beginPath(); 
context .rect (150,150, 90,90); 
context .fillStyle="#f£90"; 
context .fi11(); 

} 


运行 结果 如 图 8-22 所 示 。 


图 8-22 ”使 用 剪裁 区 域 绘图 


代码 分 析 : 在 绘制 图 片 之 前 , 首先 使 用 方法 ArcClip(contexb 设 置 一 个 圆 形 剪裁 的 区 域 。 
先 设置 一 个 圆 形 的 绘图 路 径 ， 再 调用 clip0 方 法 ， 即 完成 了 区 域 的 剪裁 。 接 着 绘制 了 图 像 ， 
把 加 载 的 图 片 ， 从 画布 的 左上 角 开 始 绘制 ， 可 以 看 见 ， 只 有 在 剪裁 区 域 里 才 有 绘制 。 最 后 ， 
又 使 用 了 路 径 的 方法 绘制 了 和 矩形， 并 填充 了 半 透 明 的 颜色 ， 也 只 在 剪裁 区 域内 有 绘制 。 

这 说 明 在 裁剪 之 后 的 任何 绘制 ， 都 局 限 在 裁剪 区 域内 部 。 如 果 想 取消 剪裁 区 域 ， 可 以 
在 剪裁 区 域 前 先 调用 save0 方 法 保存 当前 上 下 文 状态 ， 在 绘制 完 剪裁 图 像 之 后 ， 再 调用 
restore() 方 法 恢复 之 前 保持 的 上 下 文 状态 ， 这 样 就 去 除了 剪裁 区 域 ， 在 接 下 来 的 绘图 中 ， 就 
不 会 被 剪裁 区 域 局 限 了 。 
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对 Draw0 函 数 做 一 下 改动 。 
【示例 8-14】 取消 裁 前 区 域 。 


function Draw(){ 

Var canvas=document .getElementById("canvas"); 
Var context = canvas.getContext ("2d"); 
Var newImg = new Image(); 
newImg.src= "../images/Chaplin.jpg"; 
newImg.onload=function(){ 

// 保 存 当 前 状态 

context .save(); 

// 设 置 一 个 圆 形 的 剪裁 区 域 

ArcClip (context); 

// 从 左上 角 开 始 绘制 图 像 

context .drawImage (newImg, 0,0); 

// 恢 复 被 保存 的 状态 

context .restore(); 

// 设 置 全 局 半 透 明 

context .globalAlpha=0.6; 

// 使 用 路 径 绘制 的 矩形 

FillRect (context); 


B 
运行 结果 如 图 8-23 所 示 。 


图 8-23 ”使 用 剪裁 区 域 绘图 


代码 分 析 : 在 剪裁 区 域 之 前 ， 首 先 调用 save() 方 法 保存 了 当前 上 下 文 的 状态 ， 在 剪裁 
区 域内 绘制 了 图 片 之 后 ， 调 用 restore() 方 法 恢复 了 上 下 文 状 态 ， 即 剪裁 区 域 之 前 的 状态 ， 
所 以 在 接 下 来 的 绘图 中 不 再 受 剪裁 区 域 限 制 。 如 图 8-23 中 的 矩形 已 经 超出 了 剪裁 区 域 的 


夕 提示 :， 关于 方法 save() 和 方法 restore()， 将 在 后 面 的 章节 中 进行 详细 介绍 。 


8.3.7 绘制 渐变 


渐变 是 一 种 很 普遍 的 视觉 形象 ， 能 带 来 视觉 上 的 舒适 感 。 在 Canvas 中 ， 绘 图 API 提 
供 了 两 个 原生 的 渐变 方法 ， 包 括 线性 渐变 和 径 向 渐变 。 渐 变 ， 在 颜色 集 上 使 用 逐步 抽样 的 
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算法 ， 可 以 应 用 在 描 边 样式 和 填充 样式 中 。 使 用 渐变 需要 三 个 步骤 : 首先 是 创建 渐变 对 象 ; 
其 次 是 设置 渐变 颜色 和 过 渡 方式 ， 最 后 将 渐变 对 象 赋值 给 填充 样式 或 描 边 样式 。 

图 API 提供 了 两 种 渐变 的 创建 方法 : 创建 线性 渐变 的 createLinearGradient() 方 法 和 
径 向 渐变 的 createRadialGradient() 方 法 。 

1. 创建 线性 渐变 对 象 

线性 渐变 是 指 起 始点 和 结束 点 之 间 线 性 地 内 播 颜色 值 。 创 建 线性 渐变 的 语法 如 下 : 


createLinearGradient (xStart，YStart，XxEnd，YyYEnd) > 


参数 说 明 : xStart、yStart 表示 渐变 的 起 始点 的 坐标 。xEnd、yEnd 表示 渐变 的 结束 点 
的 坐标 。 返 回 一 个 渐变 对 象 。 


2. 创建 径 向 渐变 对 象 


让 


Fn 


创建 


径 向 渐变 , 是 指 两 个 指定 圆 的 圆周 之 间 放 射 性 地 插 颜色 值 。 创建 径 向 渐变 的 语法 如 下 : 


createLinearGradient (xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd); 


参数 说 明 : xStart、yStart 表示 开始 圆 的 圆心 坐标 。radiusStart 表示 开始 圆 的 半径 。xEnd、 
yEnd 表示 结束 圆 的 圆心 坐标 。radiusEnd 表示 结束 圆 的 半径 。 返 回 一 个 渐变 对 象 gradient。 


3. 设置 渐变 颜色 和 过 渡 方式 


设置 渐变 颜色 , 需要 在 渐变 对 象 上 使 用 addColorStop() 方 法 , 在 渐变 中 的 某 一 点 添加 一 
个 颜色 变化 。 语 法 如 下 : 


addColorStop (offset, color); 


参数 说 明 : offset 是 一 个 范围 在 0.0 到 1.0 之 间 的 浮 点 值 ， 表 示 渐 变 的 开始 点 和 结束 点 
之 间 的 一 部 分 ，offset 为 0 对 应 开始 点 ，offset 为 1 对 应 结束 点 。color 是 一 个 颜色 值 ， 表 示 
在 指定 offset 显示 的 颜色 。 


4. 将 渐变 对 象 赋值 给 填充 样式 或 描 边 样式 


描 边 样式 strokeStyle 和 填充 样式 fillStyle, 都 可 以 使 用 渐变 对 象 来 赋值 。 当 样式 被 赋值 
为 渐变 对 象 时 ， 绘 制 出 来 的 描 边 和 填充 都 会 有 渐变 效果 。 
【示例 8-15】 绘制 线性 渐变 的 矩形 。 


function Draw(){ 
Var canvas=document .getElementByIlId("canvas"); 
Var context = canvas.getContext ("2d"); 
// 创 建 渐变 对 象 : 线性 渐变 
var grd=context.createLinearGradient(0,0,300,0) : 
// 设 置 渐变 颜色 及 方式 
grd.addColorStop (0,"#£90"); 
grd.addColorStop (1, "#0f£0"); 
// 将 填充 样式 设置 为 线性 渐变 对 象 
Context .fillstyle=grd; 
Context .fillRect (0,0,300,80); 
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运行 结果 如 图 8-24 所 示 。 


图 8-24 ”线性 渐变 的 矩形 


代码 分 析 : 在 示例 8-15 中 ,按照 使 用 渐变 的 三 个 步骤 ,绘制 了 线性 渐变 的 矩形。 如 图 
8-24 所 示 ， 起 始点 到 结束 点 的 渐变 从 橘 黄色 渐变 到 绿色 ; 起 始点 到 结束 点 可 以 确定 一 条 线 
段 ， 渐 变 会 沿 着 该 线段 的 垂直 方向 扩展 。 设 置 渐 变 颜色 及 过 渡 方式 环节 ， 可 以 增加 使 用 
addColorStop(0) 方 法 ， 以 便 实 现 更 多 颜色 的 线性 渐变 。 

【示例 8-16】 绘制 径 向 渐变 的 算 形 。 


function Draw(){ 
Var canvas=document .getElementById("canvas"); 
Var context = canvas.getContext ("2d"); 
// 创 建 渐变 对 象 ， 径 向 渐变 
Var grd=context .createRadialGradient(50,50,0,100,100,90); 
// 设 置 渐变 颜色 及 方式 
grd.addColorSstop (0,"#0f£0"); 
grd.addColorStop (1,"#f£90"); 
// 将 填充 样式 设置 为 径 向 渐变 对 象 
context .fil1Style=grd7 
context .beginPath () 
context .arc(100,100,90,0,Math.PI*2,true) 
context .fil] (); 


} 
运行 结果 如 图 8-25 所 示 。 


图 8-25 ”线性 渐变 的 矩形 


代码 分 析 : 在 示例 8-16 中 ,起 始 圆 的 半径 为 0， 即 为 一 个 点 。 图 8-25 中 所 示 即 为 起 始 
避 的 圆周 到 结束 圆 的 圆周 之 问 的 径 向 渐变 。 设 置 渐变 颜色 及 过 渡 方 式 环节 ， 也 可 以 增加 使 
用 addColorStop0 方 法 ， 以 便 实现 更 多 颜色 的 径 向 渐变 。 
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8.3.8 描 边 属性 


在 前 面 的 章节 中 已 经 使 用 过 边框 样式 〈 即 描 边 样式 ) ， 相 信 读 者 已 不 再 陌生 。 本 节 将 
详细 讲解 描 边 过 程 中 使 用 的 各 种 属性 。 

描 边 的 过 程 也 是 绘制 线条 的 过 程 ， 绘 制 出 来 的 图 像 是 有 一 定 宽度 的 带 有 颜色 的 线条 。 
描 边 常用 的 属性 除 lineWidth 和 strokeStyle 之 外 ， 还 包括 线条 的 末端 控制 属性 lineCap、 线 
条 之 间 的 连接 属性 lineJoin 和 miterLimit。 


1. 线条 宽度 属性 lineWidth 
描述 了 画笔 (绘制 线条 ) 操作 的 线条 宽度 ， 并 且 这 个 属性 必须 大 于 0.0。 较 宽 的 线条 
在 路 径 上 居中 ， 每 边 有 线条 宽 的 一 半 。 语 法 如 下 : 


lineWidth = [value]; 


参数 说 明 : 参数 value 为 数字 ， 单 位 为 像素 ， 默认 为 1， 如 图 8-26 所 示 为 value 值 分 别 
是 10、16、20 时 的 效果 。 


图 8-26 属性 lineWidth 的 宽度 效果 


2. 线条 样式 属性 strokeStyle 


描述 了 画笔 (绘制 线条 ) 操作 的 线条 样式 。 该 样式 可 以 设置 为 颜色 、 渐 变 和 模式 。 语 
法 如 下 : 


strokestyle= [value]: 


参数 说 明 : 参数 value 可 以 设置 为 字符 串 表 示 的 颜色 ， 可 以 是 一 个 渐变 对 象 ， 也 可 以 


全 提示 : 属性 strokeStyle 和 属性 fillStyle 分 别 用 于 绘制 线条 和 绘制 区 域 ， 它 们 可 以 接受 的 
值 的 范围 是 一 样 的 : 颜色 、 渐 变 和 模式 。 关 于 模式 将 在 下 一 节 进行 讲述 。 
3. 线 帽 属性 lineCap 
描述 了 指定 线条 的 末端 如 何 绘制 。 语 法 如 下 : 


lineCap = [valuel]; 
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参数 说 明 : 参数 value 的 合法 值 是 butt、round 和 square。 默 认 值 是 butt。 如 图 8-27 所 
示 为 value 值 分 别 为 butt、round 和 square 时 的 效果 。 


图 8-27 属性 lineCap 各 属性 值 效 果 


只 有 当 线条 具有 一 定 宽度 的 时 候 ， 才 能 表现 出 各 种 值 的 差异 。 

口 butt: 定义 了 线段 没有 线 帽 。 线 条 的 末 点 是 平 直 的 而 且 和 线条 的 方向 正 交 ， 这 条 线 
段 在 其 端点 之 外 没有 扩展 。 

口 round: 定义 了 线段 的 末端 为 一 个 半圆 形 的 线 帽 ， 半 圆 的 直径 等 于 线段 的 宽度 ， 并 
且 线段 在 端点 之 外 扩展 了 线段 宽度 的 一 半 。 

口 square: 定义 了 线段 的 末端 为 一 个 矩形 的 线 帽 。 这 个 值 和 butt 有 着 同样 的 形状 效果 ， 
但 是 线段 扩展 了 自己 的 宽度 的 一 半 。 


4. 线条 的 连接 属性 lineJoin 
描述 了 两 条 线条 的 连接 方式 。 语 法 如 下 : 


lineJoin = [value]; 


参数 说 明 : 参数 value 的 合法 值 是 round、bevel 和 miter。 默 认 值 是 miter。 如 图 8-28 
所 示 为 value 值 分 别 为 round、bevel 和 miter 时 的 效果 。 


图 8-28 属性 lineJoin 各 属性 值 效果 


当 一 个 路 径 包含 了 线段 或 曲线 相交 的 交点 的 时 候 , lineJoin 属性 可 以 表现 这 些 交 点 的 连 
接 方式 。 不 过 只 有 当 线 条 较 宽 的 时 候 ， 才 能 表现 出 不 同 连接 方式 的 差异 。 
口 miter: 定义 了 两 条 线段 的 外 边缘 一 直 延 伸 到 它们 相交 。 当 两 条 线段 以 一 个 锐角 相 
交 时 ， 连 接 的 地 方 可 能 会 延伸 到 很 长 。 
口 round: 定义 了 两 条 线段 的 外 边缘 应 该 和 一 个 填充 的 弧 接 合 ， 这 个 弧 的 直径 等 于 线 
段 的 宽度 。 
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口 bevel: 定义 了 两 条 线段 的 外 边缘 应 该 和 一 个 填充 的 三 角形 相交 。 
5. 扩展 的 线条 连接 属性 miterLimit 
进一步 描述 了 如 何 绘制 两 条 线段 的 交点 。 语 法 如 下 : 


miterLimit= [value]; 


参数 说 明 : 参数 value 为 数值 。 

当 宽 线条 的 lineJoin 属性 为 miter 时 ， 并 且 两 条 线段 以 锐角 相交 的 时 候 ， 连 接 的 地 方 可 
E 会 相当 长 。miterLimit 属性 可 以 为 该 延伸 的 长 度 设置 一 个 上 限 。 这 个 属性 表示 延伸 的 长 
度 和 线条 长 度 的 比值 。 默 认 是 10， 表 示 延 伸 的 长 度 不 应 该 超过 线条 宽度 的 10 倍 。 如 果 延 
伸 的 长 度 超过 这 个 长 度 ， 就 变 成 斜 角 了 。 当 属性 lineJoin 的 值 为 round 或 bevel 的 时 候 ， 属 
性 miterLimit 是 无 效 的 。 


8.3.9 模式 


模式 是 一 个 抽象 的 概念 ， 描 述 的 是 一 种 规律 。 在 Canvas 中 , 通常 会 为 贴图 图 像 创建 一 
个 模式 ， 用 于 描 边 样式 和 填充 样式 ， 可 以 绘制 出 带 图 案 的 边框 和 背景 图 。 在 Canvas 中 ， 模 
式 是 一 个 对 象 ， 使 用 createPattern() 方 法 可 以 为 贴图 图 像 创 建 一 个 模式 ， 语 法 如 下 : 


createPattern (image, repetitionstyle) 


参数 说 明 : image 描述 了 一 个 贴图 图 像 ， 可 以 是 一 个 图 像 对 象 ， 也 可 以 是 一 个 Canvas 
对 象 。repetitionStyle 描述 了 该 贴图 图 像 的 循环 平 铺 方式 , 有 4 个 值 分 别 为 : repeat、 repeat-x、 
repeat-y 和 no-repeat。repeat 表示 图 像 在 各 个 方向 上 循环 平 铺 ; repeat-x 表示 图 像 在 横向 上 
循环 平 铺 ; repeat-y 表示 图 像 在 纵向 上 循环 平 铺 ，no-repeat 表示 图 像 只 使 用 一 次 ， 不 平 铺 。 
【示例 8-17】 用 贴图 模式 填充 矩形 。 
function Draw(){ 
Var canvas=document .getElementById("canvas") 7 
Var context = canvas.getContext ("2d"); 
var img = new Image(); // 使 用 Image () 构造 函数 创建 图 像 对 象 
img.src = '../images/flower.gif'; // 指 定 图 像 的 文件 地 址 
img.onload = function(){ 
var ptrn = context.createPattern (img, 'repeat'); 
// 创 建 一 个 贴图 模式 ， 循 环 平 铺 图 像 
context .fillstyle = ptrn; // 设 置 填充 样式 为 贴图 模式 
context .fillRect (0,0,300,200); // 填 充 和 矩形 


} 

运行 结果 如 图 8-29 所 示 。 

代码 分 析 : 使 用 贴图 模式 的 代码 包含 在 onload 处 理 函 数 中 ， 是 因为 图 像 本 身 需 要 时 间 
加 载 ， 在 加 载 完 成 之 前 ， 创 建 出 来 的 贴图 模式 是 无 效 的 。 贴 图 模式 也 可 以 用 于 描 边 样式 。 


名 提示: 模式 可 用 于 背景 的 绘制 ,使 用 方法 与 CSS 中 的 背景 样式 很 相像 。 其 中 循环 平 铺 方 
式 repeat-x、repeat-y 在 部 分 浏览 器 中 支持 得 不 是 很 好 ， 如 在 Firefox 中 。 
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图 8-29 使 用 贴图 模式 填充 的 矩形 


8.3.10 ”变换 


在 绘制 图 形 的 过 程 中 ， 如 果 一 种 形状 的 图 形 要 绘制 多 次 ， 显 然 增加 了 复杂 性 。Canvas 
绘图 API 提供 了 多 种 变换 方法 ， 为 实现 复杂 的 绘图 操作 提供 了 便捷 的 方法 。 常 见 的 变换 的 
方法 包括 平移 、 缩 放 、 旋 转 和 变形 等 。 

在 默认 情况 下 ，Canvas 的 坐标 空间 是 以 左上 角 (0,0) 作 为 原点 ，x 值 向 右 增加 ，y 值 向 
下 增加 ， 坐 标 空间 中 的 一 个 单位 通常 转换 为 像素 。 也 就 是 说 ， 坐 标 空间 默认 包含 了 一 些 基 
本 属性 。 所 以 ， 可 以 把 变换 理解 为 改变 了 坐标 空间 的 一 些 属性 设置 。 

接 下 来 通过 案例 来 讲解 图 像 的 变换 。 


1， 移 动 变换 


移动 变换 是 将 整个 坐标 系统 设置 一 定 的 偏 移 数量 ， 绘 制 出 来 的 图 像 也 会 跟着 偏 移 。 为 
坐标 系统 添加 水 平 的 和 垂直 的 偏 移 实现 移动 。 语 法 如 下 : 


translate (dx, dy); 


参数 说 明 : dx 为 水 平方 向 上 的 偏 移 量 ; dy 为 垂直 方向 上 的 偏 移 量 。 添 加 偏 移 后 ， 会 
将 偏 移 量 附加 给 后 续 的 所 有 坐标 点 。 

使 用 移动 的 方法 ， 将 绘制 的 圆 形 脸谱 移动 到 合适 的 位 置 。 

【示例 8-18】 绘制 一 个 圆 形 脸谱 。 

function Draw(){ 


Var canvas=document .getElementById("canvas"); 
Var context = canvas.getContext ("2d"); 

// 设 置 移动 偏 移 量 

context .translate (200,120); 

// 绘 制 一 个 圆 形 脸谱 


ArcFace (context); 


function ArcFace (context){ 
// 绘 制 一 个 圆 形 边框 
context .beginPath(); 
context .arc(0,0,90,0,Math.PI*2,true); 
context.lineWidth=5; 
context .strokeStyle="#f£90"; 
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Context .stroke () 

// 绘 制 一 个 脸谱 

context .beginPath () 7 
Context .moveTo (-30,-30) > 
context.lineTo(-30,—-20); 
context .moveTo (30,-30) > 
context.lineTo(30, -20); 
context .moveTo(-20, 30); 
context .bezierCurveTo(-20, 44, 20, 30, 30, 20); 
context .strokeStyle="#000"; 
context.lineWidth=10; 
context .lineCap="round"; 


context.stroke () 7 


运行 结果 如 图 8-30 所 示 。 


图 8-30 绘制 的 圆 形 脸谱 


代码 分 析 : 使 用 函数 ArcFaceO 绘 制 一 个 圆 形 脸谱 的 图 像 。 该 图 像 是 以 原点 为 中 心 绘制 
的 ， 由 于 在 绘图 开始 之 前 ， 已 经 将 坐标 系统 进行 了 偏 移 设 置 ， 所 以 绘制 的 所 有 坐标 都 进行 
相应 的 坐标 偏 移 。 其 值 ， 在 瑟 坐 标 方向 上 的 偏 移 量 为 200， 了 坐标 方向 上 的 偏 移 量 为 120。 
如 果 需 要 调整 图 像 的 位 置 ， 只 需 调 整 坐标 系统 的 偏 移 量 就 可 以 了 ， 不 用 再 在 新 的 位 置 
新 绘图 ， 很 直观 地 实现 了 图 像 的 移动 。 


2. 缩放 变换 


缩放 变换 是 将 整个 坐标 系统 设置 一 对 缩放 因子 ， 绘 制 出 来 的 图 像 会 相应 地 缩放 。 为 4 
标 系统 添加 一 个 缩放 变换 ， 设 置 独立 的 水 平和 垂直 缩放 因子 实现 图 像 的 缩放 。 语 法 如 下 ， 


scale (sx,sy); 


参数 说 明 : sx 为 水 平方 向 上 的 缩放 因子 ，sy 为 垂直 方向 上 的 缩放 因子 。sx 和 sy 为 大 
于 0 的 数字 ， 当 其 值 大 于 1 时 ， 为 放大 图 像 ， 小 于 1 时 ， 为 缩小 图 像 。 

使 用 缩放 的 方法 ， 可 以 将 绘制 的 圆 形 脸 谱 变 换 成 椭圆 形 。 

【示例 8-19】 将 圆 形 脸 谱 变 换 成 椭圆 形 。 


function Draw()1{ 
Var canvas=document .getElementBylId("canvas"); 
Var context = canvas.getContext ("2d"); 
context.translate (200,120); 
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// 缩 放 图 像 ， 在 水 平方 向 和 垂直 方向 设置 不 同 的 缩放 因子 
context.scale(0.6,0.4); 

// 绘 制 一 个 圆 形 脸谱 

ArcFace (context) 


| 


运行 结果 如 图 8-31 所 示 。 


120 
200 加 号， 
Do 


图 8-31 缩放 后 的 椭圆 形 脸谱 


代码 分 析 : 示例 8-19 中 使 用 的 函数 ArcFace 0 绘制 的 仍然 是 一 个 圆 形 脸 谱 。 在 绘制 之 
前 ， 为 坐标 系统 添加 了 缩放 变换 ， 在 对 坐标 方向 上 缩小 为 实际 的 0.6 倍 ， 工 坐标 方向 上 缩 
小 为 实际 的 0.4 倍 。 缩放 后 平移 到 适当 的 位 置 , 效果 如 图 8-31 所 示 , 圆 形 脸谱 变 成 了 椭圆 形 。 


名 提示: 示例 8-19 中 使 用 的 函数 ArcFace (0) 即 是 示例 8-18 中 的 函数 ArcFace ()， 不 再 重复 
列 出 代码 。 

通过 缩放 变换 ， 可 以 改变 图 像 在 邓 方 向 和 了 方向 上 的 比例 ， 丰 富 图 像 的 表现 。 

3. 旋转 变换 

旋转 变换 是 将 整个 坐标 系统 设置 一 个 旋转 的 角度 ， 绘 制 出 来 的 图 像 会 相应 地 旋转 。 为 
坐标 系统 指定 一 个 旋转 的 弧度 ， 绘 制 出 来 的 图 像 也 会 做 相应 的 旋转 ， 即 实现 了 图 像 的 旋转 
变换 。 语 法 如 下 : 

rotate (angle); 

参数 说 明 : angle 旋转 的 量 用 弧度 表示 。 正 值 表示 顺 时 针 方 向 旋转 , 负 值 表示 逆 时 针 方 
向 旋转 。 旋 转 的 中 心 点 为 坐标 系统 的 原点 。 


全 提示 : 这 里 的 旋转 量 是 用 弧度 表示 的 。 如 需 把 角度 转换 为 弧度 ， 请 乘 以 Math.PI 并 除 
以 180。 


使 用 旋转 的 方法 ， 可 以 将 绘制 的 圆 形 脸谱 进行 倾斜 。 
【示例 8-20】 将 圆 形 脸 谱 变 换 成 椭圆 形 。 


function Draw()1{ 
Var canvas=document .getElementById("canvas"); 
Var context = canvas.getContext ("2d"); 
context.translate(200,120); 
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// 旋 转 图 像 ， 顺 时 针 旋 转 30 度 
context.rotate (Math.PI/6) : 
Context .scale(0-6,0.4) 7 

// 绘 制 一 个 圆 形 脸谱 

ArcFace (context); 


| 


运行 结果 如 图 8-32 所 示 。 


200 


MA 
图 8-32 ”旋转 后 的 脸谱 


代码 分 析 : 示例 8-20 中 使 用 的 函数 ArcFace0 绘 制 的 仍然 是 一 个 圆 形 脸谱 。 在 绘制 之 
前 ， 为 坐标 系统 又 添加 了 旋转 变换 ， 沿 顺 时 针 方向 旋转 30 度 。 旋 转 后 的 效果 如 图 8-32 所 
示 ， 椭 圆 形 脸 谱 贷 斜 了 。 


4. 和 矩阵 变形 


通过 使 用 矩阵 ， 可 以 让 图 形变 形 更 加 复杂 。 在 默认 绘图 的 坐标 系统 中 ， 事 实 上 存在 一 
个 默认 的 和 矩阵， 当 我 们 对 这 个 矩阵 进行 修改 时 ， 就 会 造成 图 形 的 变形 。 和 矩阵 变形 的 语法 
如 下 : 

transform(mll1,m]12,m21,m22, dx, dy); 


参数 说 明 : 该 方法 中 的 6 个 参数 组 成 一 个 变形 矩阵 ， 与 当前 和 矩阵 进行 乘法 运算 ， 形 成 
新 的 矩阵 系统 。 该 变形 矩阵 的 形式 如 下 : 
mll m21 dx 
ml2 m22 dy 
0 0 1 
关于 详细 的 矩阵 变形 原理 ， 需 要 掌握 矩阵 的 相关 知识 ， 具 体 可 参考 数学 及 图 形 学 相关 
资料 。 不 过 这 里 可 以 先 通过 几 个 特例 了 解 其 大 概 的 使 用 方法 。 
前 面 已 经 讲 过 三 种 变换 ， 分 别 是 移动 、 缩 放 和 旋转 。 这 些 变换 相对 容易 理解 ， 其 实 都 
可 看 作 和 矩阵 变 形 的 特例 。 
口 移动 translate(dx,dy), 也 可 以 使 用 transform(1,0,0,1,dx,dy) 或 transform(0,1,1,0,dx,dy) 
来 实现 。 
口 缩放 scale(sx,sy)， 也 可 以 使 用 transform(sx,0,0,sy,0,0) 或 transform(0,sy,sx,0,0,0) 来 
实现 。 
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口 旋转 rotate(A)， 也 可 以 使 用 transform(cosA,sinA,-sinA,cosA,0,0) 或 transform(-sinA， 
cosA,cosA,sinA,0,0) 来 实现 。 
当然 ， 也 可 以 通过 transform() 方 法 实现 更 加 复杂 的 变形 ， 可 以 参考 数学 及 图 形 学 相关 
资料 ， 这 里 不 再 详细 讲解 。 


且说 明 : 所 有 的 变换 都 是 以 原点 为 基点 进行 的 。 所 以 绘制 的 图 像 最 好 以 原点 为 中 心 ， 然 后 
再 进行 变换 ， 否 则 图 像 位 置 会 变 得 难以 控制 。 


8.3.11 使 用 文本 


在 Canvas 中 ,也 可 以 绘制 文本 。 可 以 使 用 填充 的 方法 绘制 , 也 可 以 使 用 描 边 的 方法 绘 
制 ， 在 绘制 文字 之 前 ， 还 可 以 设置 文字 的 字体 样式 和 对 其 方式 。 绘 制 文 本 有 两 个 方法 ， 分 
别 是 填充 绘制 方法 fllText0 和 描 边 绘制 方法 strokeText()。 语 法 如 下 : 

fillText (text, x,y,maxwidth); 

strokeText (text,x,y,maxwidth); 

参数 说 明 : 参数 text 表示 要 绘制 的 文本 。 参 数 x 表示 绘制 文本 的 起 点 横 坐 标 。 参 数 y 
表示 绘制 文本 的 起 点 纵 坐 标 。 参数 maxwidth 为 可 选 参 数 , 表示 显示 文本 的 最 大 宽度 ,可 以 
防止 文本 溢出 。 

在 绘制 文本 之 前 ， 可 以 先 对 文本 进行 样式 设置 。 绘 图 API 提供 了 专门 用 于 设置 文本 样 
式 的 属性 , 可 以 设置 文本 的 字体 、 大 小 等 , 类 似 于 CSS 的 字体 属性 。 也 可 以 设置 对 齐 方式 ， 
包括 水 平方 向 上 的 对 齐 和 垂直 方向 上 的 对 齐 。 文 本 的 相关 属性 如 表 8.4 所 示 。 


表 8.4 文本 的 相关 属性 


属 性 说 了 明 
font CSS 字体 样式 字符 串 设置 字体 样式 
textAlign start | end | left | right | center 设置 水 平 对 齐 方式 ， 默 认为 start 


top | hanging | middle | alphabetic | ideographic | 设置 垂直 对 齐 方式 ,默认 为 alphabetic 
bottom i eg 


textBaseline 


【示例 8-21】 绘制 文本 示例 。 


function Draw(){ 
Var canvas=document .getElementById("canvas"); 
var context = canvas.getContext ("2d"); 
// 填 充 方式 绘制 文本 
context .fillStyle="#f£90"; 
context .font="bold 36px impact"; 
context .fillText ("Hello World!",10,50); 
// 描 边 方式 绘制 文本 
context .strokeStyle="#f£90"; 
context .font="bold italic 36px impact"; 
context .strokeText ("Hello World!",10,100); 
} 


运行 结果 如 图 8-33 所 示 。 
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图 8-33 ”绘制 的 文本 


代码 分 析 : 示例 8-21 中 ，font 属性 设置 了 文本 样式 : 字体 为 impact、 加 粗 效果 bold、 
文字 大 小 为 30px、 倾 斜 效果 italic。 其 填充 样式 仍然 使 用 flStyle 来 设置 ， 描 边 样 式 仍然 使 
用 strokeStyle 来 设置 。 
有 时 候 需 要 知道 绘制 的 文本 宽度 ， 以 方便 布局 。 绘 图 API 提供 了 这 样 的 方法 
measureText()， 用 来 获取 文本 的 宽度 。 语 法 如 下 : 


measureText (text); 


参数 说 明 : 参数 text 表示 所 要 绘制 的 文本 。 该 方法 会 返回 一 个 TextMetrics 对 象 ， 表示 


文本 的 空间 度量 。 可 以 通过 该 对 象 的 width 属性 获取 文本 的 宽度 。 


【示例 8-22】 度量 的 绘制 文本 。 


function Draw(){ 


Var canvas=document .getElementById("canvas"); 
Var context = canvas.getContext ("2d"); 

Var txt="Hello World!"; 

// 填 充 方式 绘制 文本 

context .fillStyle="#f90"; 

context .font="bold 30px impact"; 

// 根 据 已 经 设置 的 文本 样式 度量 文本 

Var tm=context.measureText (txt); 

Context .fillText (txt,10,50) 7 

context .fillText (tm.width, tm.width+15,50); 

// 描 边 方式 绘制 文本 

context .strokeStyle="#f£f90"; 

context .font="bold italic 36px impact"; 

// 根 据 已 经 设置 的 文本 样式 度量 文本 

tm=context .measureText (txt); 

context .strokeText (txt, 10,100); 

context .strokeText (tm.width, tm.width+15,100); 


运行 结果 如 图 8-34 所 示 。 


Hello World!161 
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图 8-34 度量 文本 的 数值 
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代码 分 析 : 度量 文本 是 以 当前 设置 的 文本 样式 为 基础 的 。 即 文本 样式 确定 以 后 ， 即 可 
获取 文本 的 度量 ， 不 需要 等 待 绘制 文本 完成 后 再 去 度量 。 


8.3.12 ” 阴 景 


效果 


阴影 效果 可 以 增加 图 像 的 立体 感 。 为 图 像 添 加 阴影 效果 ， 可 利用 绘图 API 提供 的 绘制 


阴影 的 属性 。 
就 能 绘制 出 


阴影 属性 不 会 单独 去 绘制 阴影 ， 只 需要 在 绘制 任何 图 像 之 前 ， 添 加 阴影 属性 ， 
带 有 阴影 效果 的 图 像 。 设 置 阴影 的 属性 有 4 个， 如 表 8.5 所 示 。 


表 8.5 阴影 属性 


属 性 | 说 了 明 
shadowColor 可 以 使 用 半 透 明 颜色 

shadowOffsetX 阴影 的 横向 位 移 量 ， 向 右 为 正 ， 向 左 为 负 
shadowOffsetY 阴影 的 纵向 位 移 量 ， 向 下 为 正 ， 向 上 为 负 


shadowBlur 


高 斯 模糊 ， 值 越 大 ， 阴 影 边 缘 越 模糊 


【示例 8-23】 文字 和 图 形 添 加 阴影 。 


function Draw(){ 


var 
var 


// 设 


canvas=document .getElementById("canvas"); 
context = canvas.getContext ("2d"); 


置 阴影 属性 


context .shadowColor="#666"; 

context .shadowOffsetX=5; 

context .shadowOffsetY=5; 

context .shadowBlur=5.5; 

/ /绘制 文 本 

context .fillSstyle="#f90"; 

context .font="bold 36px impact"; 
context .fillText ("Hello World!",10,50); 


// 路 


径 绘制 图 形 


Context .fillStyle="#f£90"; 
context .arc(100,100,30,0,Math.PI*2,false) 


context .£1i11()» 


| 


运行 结果 如 图 8-35 所 示 。 


代码 分 析 : 
本 和 图 形 均 附 
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图 8-35 文字 和 图 形 的 阴影 效果 


在 示例 8-23 中 ， 在 绘制 文本 和 图 形 之 前 ， 设 置 了 阴影 属性 。 其 后 绘制 的 文 
带 阴影 效果 。 
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县 提示: 阴影 属性 可 以 应 用 于 任何 绘制 的 图 像 中 ， 也 包括 图 片 。 


8.3.13 ”状态 的 保存 与 恢复 


在 剪裁 区 域 一 节 中 , 介绍 了 去 除 剪 裁 区 域 的 方法 , 即 通 过 保存 和 恢复 绘图 状态 来 实现 。 
在 绘图 过 程 中 ， 绘 图 状态 可 能 会 不 断 改变 ， 如 果 某 个 状态 需要 多 次 使 用 ， 可 以 保存 这 个 状 
态 ， 待 需要 的 时 候 ， 再 把 这 个 状态 恢复 。 

绘图 API 提供 了 状态 保存 方法 save0 和 状态 恢复 方法 restore0, 分别 用 于 绘图 状态 的 保 
存 与 恢复 。 使 用 方法 比较 简单 ， 语 法 如 下 : 

save () 7 

restore(); 

状态 的 保存 和 恢复 是 通过 数据 栈 进行 的 。 当 调用 save0 方 法 时 ， 当 前 的 状态 会 保存 到 
-个 数据 栈 里 ， 当 调用 restore0 方 法 时 ， 会 取出 最 后 一 次 保存 到 数据 栈 里 的 数据 ， 即 恢复 
最 后 一 次 保存 的 状态 。 


外 提示 : 栈 是 一 种 数据 结构 ， 是 按照 后 进 先 出 的 原则 来 存储 数据 的 。 这 好 比 打开 一 个 
箱子 , 先 拿 出 来 最 上 面 的 东西 , 也 就 是 最 后 放 进去 的 东西 , 遵循 后 进 先 出 的 原则 。 


其 中 绘图 的 状态 由 以 下 儿 个 因素 确定 。 

(1) 坐标 系统 的 变换 : 平移、 缩放 、 旋 转 和 矩阵 变形 。 

(2) 绘图 API 提供 的 所 有 属性 : globalAlpha、globalCompositeOperation、strokeStyle、 
fillStyle lineWidth, lineCap lineJoin、 miterLimit, font\textAlign.textBaseline\ shadowOffsetX、 
shadowOffsetY、shadowBlur、shadowColor 等 。 

(3) 剪裁 的 区 域 。 

状态 包含 的 内 容 仅 局 限于 以 上 几 点 内 容 ， 至 于 当前 绘制 出 来 的 图 形 或 路 径 ， 不 属于 状 
态 内 容 ， 也 不 会 被 保存 或 恢复 。 

【示例 8-24】 状态 的 保存 与 恢复 。 

function Draw(){ 

var canvas=document .getElementById("canvas"); 


Var context = canvas.getContext ("2d"); 
// 设 置 填充 颜色 为 绿色 

context .fil1Style = "#0f0"; 

// 保 存 状态 

context .save(); 

// 设 置 新 的 填充 颜色 为 橘 黄色 

context .fillStyle = "#F90"; 

// 填 充 一 个 矩形 区 域 

context .beginPath () 7 
Context .rect (10,10, 90, 90); 

context .fill(); 

// 恢 复 状态 

context .restore(); 

// 填 充 一 个 圆 形 区 域 

Context .beginPath() 

context .arc(100,100,50,0,Math.PI*2,true) 7 
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Context ETI(: 
F 


运行 结果 如 图 8-36 所 示 。 


图 8-36 ”状态 的 保存 于 恢复 


代码 分 析 : 示例 8-24 中 ， 首 先 将 属性 fillstyle 设置 为 绿色 ， 并 调用 save0 方 法 保存 状 
态 ; 接着 再 将 属性 flStyle 设置 为 橘 黄色 ， 并 填充 矩形 ;最 后 调用 restore0) 方 法 恢复 状态 ， 
并 填充 一 个 圆 形 。 如 图 8-36 所 示 ， 圆 形 被 填充 为 绿色 。 

外 提示 : 状态 的 保存 与 恢复 ， 是 用 来 保存 和 恢复 当时 绘图 的 状态 环境 ， 保 存 状 态 之 后 绘 
制 出 来 的 图 形 ， 不 会 因为 状态 的 恢复 而 消失 ， 即 恢复 的 不 是 绘制 的 内 容 ， 请 准确 
理解 。 


8.3.14 ”操作 像素 


在 Canvas 中 ， 绘 图 API 还 提供 了 像素 级 的 操作 方法 ， 分 别 是 : createImageData()、 
getImageData0 和 putImageData()。 使 用 这 些 方 法 ， 可 以 直接 操纵 底层 的 像素 数据 。 这 里 还 
使 用 了 一 个 图 像 数 据 对 象 InageData。 


1. ImageData 对 象 


在 处 理 像素 数据 的 过 程 中 ， 该 对 象 作 为 一 种 处 理 的 媒介 ， 保 存 了 可 以 操作 的 图 像 像素 
数据 。 细 致 的 图 像 操 作 ， 就 是 在 对 象 ImageData 中 进行 的 。 

该 对 象 有 三 个 属性 : width、height 和 data。 其 中 width 表示 每 行 有 多 少 个 像素 ; height 
表示 有 多 少 行 像素 ;data 是 一 个 一 维 数组 ， 保 存 了 所 有 像素 的 颜色 值 ， 按 照 从 左 到 右 、 从 
上 到 下 的 顺序 依次 存储 。 

关于 颜色 值 ， 每 个 像素 的 颜色 值 包 含 4 个 数字 ， 分 别 代表 红 、 绿 、 葛 和 透明 度 ， 各 个 
数字 值 的 范围 均 为 0 至 255， 包 括 透明 度 的 值 也 是 这 个 范围 。 


2. 获取 图 像 数 据 的 方法 getlmageData() 
从 Canvas 上 下 文中 获取 图 像 数据 。 语 法 如 下 : 


getImageData (sx, sy, sw, sh) 


参数 说 明 : 该 方法 有 4 个 参数 。sx、sy 分 别 表 示 所 获取 区 域 的 起 点 横 坐 标 和 起 点 纵 多 
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标 ; sw、sh 分 别 表示 所 获取 区 域 的 宽度 和 高 度 ; 返回 的 结果 是 一 个 ImageData 对 象 。 

3. 绘制 图 像 数 据 方法 putlImageData() 

将 处 理 好 的 图 像 数 据 绘 制 到 Canvas 中 。 语 法 如 下 : 

getImageData (imagedata, dx, dy[,dirtyX,dirtyY,dirtyWidth,dirtyHeight]); 

参数 说 明 : 该 方法 有 3 个 必需 参数 和 4 个 可 选 参数 。imagedata 为 InageData 对 象 ， 包 
含 了 图 像 数据 ; dx、dy 分 别 表示 绘制 的 起 点 横 坐 标 和 起 点 纵 坐标 ; 可 选 参数 dirtyX、dirtyY、 
dirtyWidth 和 dirtyHeight 确定 了 一 个 以 dx 和 dy 为 坐标 原点 的 和 矩形， 分别 表示 矩形 的 起 点 
横 坐标 、 起 点 纵 坐 标 、 宽 度 和 高 度 。 如 果 加 上 这 4 个 参数 ， 绘 制 的 图 像 仅 限制 在 该 矩形 范 
围 内 ， 类 似 一 个 裁剪 的 区 域 。 
4. 创建 图 像 数据 的 方法 createlmageData() 


直接 创建 一 组 空 的 图 像 数 据 。 语 法 如 下 : 


createImageData (sw, sh) 


参数 说 明 : 该 方法 有 两 个 参数 。sw 表示 图 像 数 据 的 宽度 ，sh 表示 图 像 数据 的 高 度 ; 
创建 的 结果 是 返回 一 个 ImageData 对 象 。 


名 提示 : 不 是 所 有 浏览 器 都 实现 了 createImageData， 所 以 使 用 的 时 候 ， 注 意 把 握 。 
【示例 8-25】 图 像 底片 效果 。 


function Draw(){ 
Var canvas=document .getElementById("canvas"); 
var context = canvas.getContext ("2d"); 
Var newImg = new Image(); 
newImg.src= "../images/Chaplin.jpg"; 
newImg.onload=function(){ 
context .drawImage (newImg, 0,0,400,300); 
context .save(); 
// 获 取 图 像 数 据 
var imageData = context.getImageData(0, 0, 400, 300); 
// 修 改 ImageData 对 象 的 data 数据 ， 处 理 为 反 向 
for (var i=0,n=imageData.data.length;i<n;i+=4){ 


// 红 色 部 分 
imageData.data[i+0] =255-imageData.data[i+0]; 
// 绿 色 部 分 
imageData.data[i+1] =255-imageData.data[i+l]: 
// 蓝 色 部 分 


imageData.data[i+2] =255-imageData.data[i+2]: 


} 
// 绘 制 该 图 像 数据 
context .putImageData (ImageData,200,150) 


| 


运行 结果 如 图 8-37 所 示 。 
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图 8-37 图 像 的 底片 效果 


代码 分 析 : 在 示例 8-25 中 实现 底片 效果 ， 分 为 三 步 又。 首先 ， 获 取 整 个 图 像 ， 接着 对 
图 像 中 的 每 个 像素 进行 反 向 处 理 ， 最 后 将 图 像 数 据 再 次 绘制 到 指定 的 位 置 。 


外 提示 : 示例 8-25 在 本 地 直接 调试 可 能 出 错 。 这 是 由 于 JavaScript 的 同 源 策略 对 context. 
getImageData 的 影响 。 该 策略 是 基于 浏览 器 的 安全 ， 擅 自 禁 用 该 策略 可 能 会 造成 
安全 隐患 。 你 可 以 在 本 地 建立 一 个 站 点 ， 将 该 示例 放 在 站 点 中 运行 。 


直接 操作 像素 ， 通 过 ImageData 可 以 完成 很 多 功能 。 除 了 上 面 的 示例 的 底片 效果 ， 还 
可 以 实现 诸如 图 像 滤 镜 、 数 学 可 视 化 〈 如 分 形 和 其 他 特效 ) 等 效果 。 


8.4 实验 室 : 在 Canvas 中 实现 动画 


在 Canvas 中 ， 除 了 一 些 常规 的 绘图 , 还 能 开发 一 些 动画 甚至 是 游戏 ， 而 这 一 切 动画 的 
实现 ， 除 了 充分 利用 Canvas 绘图 API， 还 需要 JavaScript 的 易 力 相助 。 

在 Canvas 中 , 动画 是 通过 一 系列 连续 的 画面 按 顺 序 呈 现 来 实现 的 。 而 这 些 连续 的 画面 
是 即时 绘制 出 来 的 ， 为 了 使 动画 更 加 流畅 ， 可 能 在 很 短 的 时 间 内 重新 绘制 很 多 次 。 动 画 的 
大 致 实现 流程 可 以 分 以 下 几 个 步骤 。 

(1) 清空 画布 。 

(2) 改变 绘图 的 状态 ， 包 括 坐 标 系统 变换 、 各 种 属性 的 修改 等 。 

(3) 重新 绘制 图 形 。 

(4) 回 到 第 一 步 。 

在 上 面 几 个 步骤 的 轮回 中 ， 需 要 将 绘制 动作 放 在 一 个 定时 器 里 。Javascript 提供 了 两 个 
定时 器 方法 ， 分 别 是 :setInterval(code,millisec) 和 setTimeout(code,millisec)。 关 于 这 两 个 方 
法 ， 可 以 去 查阅 Javascript 相关 资料 ， 这 里 不 再 讲解 。 

为 了 方便 绘制 图 像 ， 可 能 需要 频繁 修改 绘图 的 状态 ， 及 时 保存 和 恢复 状态 ， 可 以 让 你 
方便 许多 。 


1. 动画 : 制作 一 个 碰 碰 球 
现在 就 利用 学 过 的 绘图 API 知识 ， 来 绘制 一 个 简单 的 碰 碰 球 。 在 这 个 示例 中 ， 球 在 画 
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布 中 不 停 地 移动 ， 当 碰 到 边界 时 ， 改 变 球 的 颜色 ， 并 弹 回 继续 移动 ， 如 此 循环 下 去 。 同 时 
给 出 “开始 ”和 “和 暂停” 按钮， 以 便 在 Canvas 画布 之 外 实现 控制 ， 最 终 效 果 如 图 8-38 
所 示 。 


图 8-38 ” 碰 碰 球 动画 应 用 


下 面 我 们 就 一 步 一 步 地 来 实现 它 。 

当 球 碰 到 上 面 时 ， 会 变 成 红色 ， 碰 到 右边 时 会 变 成 橘 黄色 ， 碰 到 下 面 时 会 变 成 绿色 ; 
碰 到 左边 时 会 变 成 蓝 色 。 为 方便 视觉 识别 ， 下 面 会 将 画布 的 4 个 边框 设置 成 对 应 的 颜色 ， 
并 设置 两 个 像素 的 宽度 ， 以 便 更 加 醒目 。 这 个 环节 我 们 用 CSS 来 实现 ， 代 码 如 示例 8-26 
所 示 。 

【示例 8-26】 碰 碰 球 的 Canvas 元 素 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>canvas 动画 -- 磁 碰 球 </title> 
<style type="text/css"> 
canvas { 
border-top:2px solid #f00; 
border-right:2px solid #f£90; 
border-left:2px solid blue; 
border-bottom:2px solid green; 
} 
</style> 
<script type="text/javascript"> 
// 此 处 添加 JavaScript 代码 
</script> 
</head> 
<body> 
<div align="center"> 
<canvas id="canvas" width="400" height="300"> 你 的 浏览 器 不 支持 该 功能 ! 
</canvas><br /> 
<input onclick="animation.start()" value=" 开 始 " type="button"> 
<input onclick="animation.pause()"” value=" 暂 停 ” type="button"></div> 
</body> 
</html> 


接 下 来 开始 在 头 部 添加 JavaScript 代码 。 首 先 定义 一 个 动画 对 象 ， 并 为 该 对 象 添加 一 
些 属性 。 这 里 的 属性 是 根据 应 用 需要 自 定义 的 。 主 要 包括 : 定时 器 、 蕊 方向 偏 移 量 、 工 方 
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向 偏 移 量 、 蕊 方向 移动 步 长 、 工 方向 移动 步 长 、 


形 半径 、 


形 的 填充 颜色 及 动画 的 间隔 


EI 
Ban 


时 间 (毫秒 ) ， 代 码 如 示例 8-27 所 示 。 
【示例 8-27】 定义 动画 对 象 并 添加 系列 属性 。 
// 定 义 一 个 动画 对 象 


var animation={}; 
/ /为 该 对 象 添加 属性 
// 添 加 定时 器 


animation.interval=null; 


// 移 动 变 换 x 方向 的 偏 移 量 


animation.x=100; 

// 移 动 变换 y 方 向 的 偏 移 量 
animation.y=50; 
//x 方 向 的 移动 步 长 
animation.xstep=2; 
//y 方 向 的 移动 步 长 
animation.ystep=2; 
// 圆 形 半径 
animation.radius=15; 
// 填 充 圆 形 的 颜色 
animation.color="red"; 
// 动 画 间隔 时 间 : 毫 秘 


animation.delay=10; 

接 下 来 为 动画 对 象 添 加 update() 方 法 。 该 方法 用 来 更 新 偏 移 量 x 和 y， 还 有 填充 的 颜色 
值 color。 因 为 该 方法 和 上 面 添加 的 属性 ， 同 属于 动画 对 象 animation， 所 以 在 update() 方 法 
中 ， 可 以 通过 this 来 引用 animation 的 各 个 属性 。 

update() 方 法 会 检测 各 个 边缘 ,并 在 球 碰 到 边缘 的 时 候 改 变 其 颜色 。 该 方法 有 两 个 参数 
width 和 height， 分 别 为 画布 的 宽 和 高 。 代 码 如 示例 8-28 所 示 。 

【示例 8-28】 为 动画 对 象 添加 update0 方 法 。 

// 更 新 偏 移 量 x 和 y 


animation.update=function (width, height){ 
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// 改 变 x 坐 标 

this .x+=this .xstep7 

this.y+=this.ystep; 

// 左 边缘 检测 

if(this.x<this.radius){ 
this.x=this.radius; 
this.xstep=-this.xstep; 
this.color="blue"; 

} 

// 右 边缘 检测 

if((this.xt+this.radius)>width){ 
this.x=width-this.radius; 
this.xstep=-this.xstep; 
this.color="#f£90"; 


} 

// 上 边缘 检测 

if(this.y<this.radius){ 
this.y=this.radius; 
this.ystep=-this.ystep; 
this.color="red"; 


} 
// 下 边缘 检测 
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if((this.ytthis.radius)>height){ 
this.y=height-this.radius; 
this.ystep=-this.ystep; 
this.color="green"; 
} 
}; 


接 下 来 添加 一 个 绘图 方法 draw0。 在 绘图 之 前 ， 会 首先 清空 画布 ， 再 调用 animation 
对 象 的 update0 方 法 ， 来 更 新 动画 属性 。 也 就 是 前 面 提 到 的 制作 动画 的 第 一 步 和 第 二 步 ， 
清空 画布 和 变更 绘图 状态 。 

在 清空 画布 之 前 ， 先 对 状态 进行 保存 ， 绘 制 完成 后 ， 会 及 时 恢复 绘图 状态 ， 为 下 一 次 
绘图 做 好 准备 。 

圆 形 的 填充 样式 设置 为 动画 对 象 的 color 属性 ， 而 color 属性 在 边缘 检测 的 时 候 是 会 被 
改变 的 。 绘 图 方法 如 示例 8-29 所 示 。 

【示例 8-29】 为 动画 对 象 添 加 draw0 方 法 。 

// 绘 制图 形 


animation.draw=function(){ 
Var canvas=document .getElementById ("canvas"); 
Var width=canvas.getAttribute ("width"); 
Var height=canvas .getRAttribute ("height"); 
Var Context=canvas .getContext("2d") : 
// 保 存 状态 
context.save () 
// 清 空 画布 
context.clearRect(0,0,width,height) : 
// 更 新 坐标 
this.update (width, height); 
// 填 充 颜 色 
context .fillSstyle=this.color; 
/ /移动 坐标 
context .translate (this.x,this.y); 
// 重 新 绘制 
Context.beginPath() 
context.arc(0,0,this.radius,0,Math.PI*2, true); 
context .fill1(); 
// 恢 复 状 态 
context .restore(); 


}; 

接 下 来 定义 一 个 动画 开始 的 方法 start0 和 一 个 动画 暂停 的 方法 pause0， 分 别 用 于 “ 开 
始 ” 按 钮 和 “暂停 ”按钮 。 

start() 方 法 中 ， 使 用 setInterval0) 方 法 把 绘画 方法 添加 到 定时 器 里 。 在 添加 定时 器 之 前 ， 
先 做 一 个 停止 动画 的 操作 ， 防 止 连续 点 击 开始 ， 造 成 定时 器 效果 的 累加 。pause() 方 法 是 暂 
停 动画 ， 清 除 定时 器 。 

动画 的 开始 与 暂停 方法 如 示例 8-30 所 示 。 

【示例 8-30】 动画 的 开始 与 暂停 方法 。 

// 暂 停 动画 

animation.pause=function(){ 

ClearInterval (this.interval); 


}; 
// 开 始 动 画 


多 


第 3 篇 基于 HIML 5 的 Web 应 用 开发 实战 


animation.start =function(){ 
// 停 止 动画 
this.pause(); 


// 开 始 动画 

this.interval = setInterval ("animation.draw()",this.delay); 

最 后 ,将 animation.start() 方 法 应 用 于 “开始 ”按钮 的 onclick 事件 ; 将 animation.pause() 
方法 应 用 于 “暂停 ”按钮 的 onclick 事件 。 应 用 如 示例 8-26 所 示 。 

此 时 运行 代码 ， 通 过 操作 “开始 ”按钮 和 “暂停 ”按钮 ， 可 以 看 到 令 人 惊奇 的 动画 效 
果 。 如 果 你 想 让 图 像 变 得 更 加 复杂 ， 可 以 修改 绘图 方法 animation.drawO。 

在 Canvas 里 实现 动画 并 不 难 ， 总共 100 多 行 代码 ， 而 且 不 需要 借助 任何 插件 ， 就 能 实 
现 动画 效果 。 这 里 实现 的 只 是 一 个 简单 的 动画 , 如果 你 想 实现 更 高 级 、 更 复杂 的 应 用 , Canvas 
也 能 做 到 。 


8.5 小 结 


本 章 全 面 讲解 了 Canvas 绘图 的 各 种 方法 。 重 点 讲解 了 路 径 、 曲 线 、 图 像 、 渐 变 、 模 式 
和 像素 操作 等 绘图 方法 。 其 中 曲线 成 形 原理 涉及 较 深 数学 知识 ， 不 容易 理解 ;裁剪 区 域 和 
模式 比较 抽象 ， 也 比较 重要 ， 需 要 多 练习 、 多 琢磨 ， 关 于 像素 涉及 的 数据 的 底层 操作 ， 也 
是 一 个 难点 。 

Canvas 绘图 是 HIML 5 中 一 个 相当 重要 的 应 用 ， 在 绘图 基础 上 ， 不 仅 可 以 制作 动画 ， 
还 可 以 开发 游戏 。 下 一 节 将 介绍 新 型 的 基于 HIML 5 的 多 媒体 应 用 : 音频 和 视频 。 


8.6 习 题 


【习题 1】 如 何 获得 二 维 的 绘图 上 下 文 对 象 ? 请 编写 相应 的 代码 进行 说 明 。 

【习题 2】 人 绘制 矩形 边框 有 哪 几 种 方法 ? 请 简要 说 明 。 

【习题 3】 绘 制 曲线 有 哪 几 种 方法 ? 请 简要 说 明 。 

【习题 4】Canvas 绘图 中 的 图 形变 换 是 通过 改变 坐标 系统 来 实现 的 ， 请 列举 常用 的 变 
换 方 法 。 

【习题 5】 编 写 一 段 程序 ， 把 图 片 以 底片 的 形式 插入 到 画布 中 。 
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在 HIML 5 之 前 , 在线 的 音频 和 视频 都 是 借助 Flash 或 第 三 方 工具 实现 的 , 现在 HTML 
5 也 支持 这 方面 的 功能 。 在 一 个 支持 HTML 5 的 浏览 器 中 ， 不 需要 安装 任何 插件 就 能 播放 
音频 和 视频 。 原 生地 支持 音频 和 视频 ， 为 HTML 5 注入 了 巨大 的 发 展 潜力 。 本 章 将 介绍 
HTML 5 中 的 两 个 重要 元 素 一 audio 和 video， 分 别 用 于 实现 音频 和 视频 ， 又 称 为 多 媒体 。 
对 于 这 两 个 元 素 ，HTML 5 为 开发 者 提供 了 标准 的 、 集 成 的 API。 


9.1 audio 和 video 基础 知识 


HTML 5 对 多 媒体 的 支持 是 顺势 发 展 ， 只 是 目前 还 没有 规范 得 很 完整 ， 各 种 浏览 器 的 
支持 ， 差 别 也 很 大 。 如 果 深 入 理解 HTML 5 的 audio 和 video 两 个 元 素 ， 有 必要 对 其 相关 
的 多 媒体 技术 有 一 定 的 了 解 。 


9.1.1 在 线 多 媒体 的 发 展 


1. 在 线 视频 的 发 展 


早 在 2000 年 ， 在 线 视频 都 是 借助 第 三 方 工具 实现 的 ， 如 RealPlayer 和 QuickTime 等 ， 
但 它们 存在 隐私 保护 问题 或 兼容 性 问题 。 

HTML 规范 的 发 展 与 浏览 器 息息相关 ， 当 Microsoft 赢得 了 2001 年 的 浏览 器 大 战 时 ， 
即 停止 了 对 正 浏览 器 功能 的 改进 。 而 W3C 也 声明 HTML 规范 已 经 “过 时 ”， 转 而 关注 
XHTML 和 XHTML 2， 严 谨 的 数据 规范 和 验证 ， 弱 化 了 HTML 本 身 的 功能 。 此 时 没有 人 
认为 ， 在 HTML 中 实现 视频 播放 是 个 好 主意 。 

然而 根据 实际 的 需要 ， 开 发 人 员 仍 然 要 在 网 页 上 实现 多 媒体 功能 ， 进 而 转向 Flash 的 
改进 功能 。 

2002 年 ，Macromedia 为 了 满足 使 用 Flash Video 开发 人 员 的 需求 ， 引 入 了 Sorenson 
Spark。2003 年 ， 该 公司 使 用 VP 6 编 解码 器 (codec) 引入 了 外 部 视频 FLV 格式 。 在 当时 ， 
这 是 高 质量 、 高 压缩 的 。 由 此 使 用 Flash 开发 的 在 线 视频 , 有 了 近 十 年 的 发 展 , Flash Player 
的 安装 库 也 变 得 越 来 越 大 ，Flash Video 几乎 没有 缺点 ，Flash Video 已 经 发 展 成 为 事实 上 的 
Web 标准 。 


2. 仍然 存在 的 问题 
如 果 在 读者 的 网 站 上 放置 一 个 Flash 视频 , 通常 需要 对 Adobe ActionScript 和 专 有 工 
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有 很 强 的 理解 ， 才 能 编码 视频 和 创建 播放 器 控件 。 一 个 Flash 对 象 的 嵌入 代码 已 存在 很 多 
年 了 ， 如 示例 9-1 所 示 的 代码 ， 就 算 读者 研究 很 长 时 间 ， 也 不 能 让 它 简 单 多 少 。 
在 HTML 5 之前, 要 在 网 页 中 添加 音频 或 视频 , 最 简单 、 最 通用 的 方法 , 是 使 用 Flash。 
下 面 我 们 回顾 一 下 音频 或 视频 的 实现 方式 ， 如 示例 9-1 所 示 。 
【示例 9-1】 Flash 视频 嵌入 示例 。 
<object id="video" height="400" width="600" codebase="http://download. 
macromedia.com/" 
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" > 
<param value="myVideoPlayer.swf" name="movie" /> 
<param value="true" name="allowFullScreen" /> 
<param value="all" name="allowNetworking" /> 
<param value="always" name="allowScriptAccess" /> 
<param value="opaque" name="wmode" /> 
<param value="myVideoFile.flv" name="FlashVars" /> 
<embed height="520" width="528" src="mds player.swf" 
id=" video" wmode="opaque" allowscriptaccess="always" allownetwor 
king="al1" 
allowfullscreen="true" swf="myVideoPlayer.swf" 
flashvars="myVideoFile.flv" 
pluginspage="http://www.macromedia.com/go/getflashplayer" 
type="application/x-shockwave-flash" quality="high" /> 
</object> 


示例 9-1 中 的 代码 不 兼容 正 浏览 器 ， 如 果 要 兼容 正 浏览 器 ， 需 要 增加 同样 多 的 代码 。 
这 种 实现 方式 的 缺点 是 代码 较 长 ， 最 重要 的 是 需要 安装 Flash 插件 ， 并 非 所 有 浏览 器 都 拥 
有 同样 的 插件 。 

3. HTML 5 视频 简介 


在 HIML 5 中 ， 不 但 不 需要 安装 其 他 插件 ， 而 且 实现 还 很 简单 。 播 放 一 个 视频 只 需要 
- 行 代码 ， 如 : 


<video src="resources/test.mp4" autoplay></video> 


可 见 ， 在 HIML 5 中 省 去 了 许多 不 必要 的 信息 。 

在 HTML 5 中 实现 多 媒体 ， 不 需要 知道 数据 的 类 型 ， 因 为 标签 已 经 指明 ; 也 不 需要 设 
置 版 本 信息 ， 因 为 不 涉及 这 方面 的 信息 ; 可 以 由 CSS 样式 表 来 控制 尺寸 ， 因 为 它们 是 页 面 
元 素 。 这 些 原 生 的 优势 ， 是 其 他 任何 第 三 方 插件 都 无 法 企及 的 。 


9.1.2 多 媒体 术语 

要 进行 视频 开发 ， 读 者 需要 明白 多 媒体 方面 的 术语 。 音 频 和 视频 都 会 涉及 两 个 方面 的 
概念 : 文件 格式 和 编 解码 器 。 

1. 视频 文件 格式 


不 论 是 音频 还 是 视频 , 都 只 是 一 个 压缩 的 容器 文件 。 关于 视频 文件 ， 包含 了 音频 轨道、 
视频 轨道 和 一 些 元 数据 封面、 标题 、 字 幕 等 ) 。 不 同 视频 格式 的 视频 文件 ， 所 属 的 视频 
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容器 也 不 一 样 。 目 前 比较 流行 的 视频 格式 如 下 : 
Audio Video Interleaved (.avi) 

Flash Video (.flv) 

MPEG-4 (mp4) 

Matroska (.mkv) 

Ogg (.ogv) 


音频 和 视频 编 解 码 器 


加 加重. 且 加 


编 解 码 器 是 一 些 算 法 代码 ， 用 来 处 理 视频 、 音 频 或 者 其 元 数据 的 编码 格式 。 对 音频 或 
视频 文件 进行 编码 ， 可 使 得 文件 大 大 缩小 ， 方 便 在 因特网 上 传输 ， 因 为 在 网 络 多 媒体 发 展 
方面 ， 网 络 带 宽 是 一 个 很 大 的 瓶颈 。 以 下 是 HTML 5 音频 文件 格式 及 其 各 自 的 编 解码 器 。 

口 MP3: 使 用 ACC 音频 。 

口 Wav: 使 用 Wav 音频 。 

口 Ogg: 使 用 OggVorbis 音频 。 

以 下 是 HTML 5 视频 文件 格式 及 其 各 自 的 编 解 码 器 。 

口 MP4: 使 用 H.264 视频 、AAC 音频 。 

口 WebM: 使 用 VP 8 视频 、OggVorbis 音频 。 

口 Ogg: 使 用 Theora 视频 、OggVorbis 音频 。 

H.264 编 解 码 器 被 广泛 采用 ， 因 此 读者 所 使 用 的 大 多 数 编码 软件 都 可 以 编码 一 个 MP4 
视频 。WebM 是 新 兴 的 , 但 是 工具 都 已 经 可 以 使 用 。Ogg 是 开源 的 , 但 是 还 没有 广泛 使 用 ， 
因此 只 有 少数 儿 个 工具 可 供 其 使 用 。 


全 提示 : MP4 容器 、H.264 视频 编 解码 器 及 ACC 音频 编 解 码 器 都 是 MPEG LA Group 专利 
的 专 有 格式 。 对 于 个 人 网 站 或 者 仅 有 少量 视频 的 公司 ， 这 不 是 问题 。 然 而 对 于 那 
些 有 大 量 视频 的 公司 要 非常 注意 许可 证 和 费用 ,因为 这 可 能 会 影响 他 们 盈亏 的 底 
线 。MP4 容器 及 其 编 解码 器 对 终端 用 户 通 常 是 免费 的 。 
WebM 和 Ogg 容器 , VP8 和 Theora 视频 编 解 码 器 及 Vorbis 音频 编 解 码 器 都 是 Berkeley 
Software Distribution License 授权 的 、 免 版 费 和 开放 源码 的 。 视 频 可 以 无 成 本 制作 、 分 发 和 
观看 。 然 而 ， 传 言 VP8 可 能 侵害 一 些 H.264 专利 ， 故 总 是 保持 最 新 更 新 。 


9.1.3 HTML 5 多 媒体 文件 格式 


在 写作 本 书 的 时 候 ， 很 多 浏览 器 已 经 实现 了 对 HIML 5 中 的 audio 元 素 和 video 元 素 
的 支持 。 

1. 音频 格式 的 支持 情况 

目前 ，audio 元 素 支 持 的 音频 格式 是 MP3、Wav 和 Ogg， 在 各 种 主流 浏览 器 中 的 支持 
情况 如 表 9.1 所 示 。 
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表 9.1 audio 元 素 音频 格式 的 支持 情况 
浏览 器 
正 


| 
Firefox / | 3 
Safari 3.0+ | / 
Chrome 3.0+ | 3.0+ 


Opera 


2. 音频 格式 的 支持 情况 


目前 ，video 元 素 支 持 的 格式 是 MP4、WebM 和 Ogg， 在 各 种 主流 浏览 器 中 的 支持 情 
况 如 表 9.2 所 示 。 


表 9.2 ”video 元 素 视频 格式 的 支持 情况 


浏览 器 MP4 Ogg 

正 9.0+ / 

Firefox / 3.5+ 

Safari 3.0+ / 

Chrome 5.0+ 5.0+ 

Opera LL 10.5+ 

另外 : Mac 上 的 Safari 和 Windows 上 的 Intemet Explorer 9， 将 支持 任何 编 解 码 器 已 经 

安装 在 操作 系统 上 的 类 型 。 其 他 浏览 器 (Firefox、Opera、Chrome) 需要 具体 实现 所 有 视 


频 的 编 解码 器 。 
9.1.4 功能 缺陷 及 未 来 趋势 

直到 现在 ， 仍 然 不 存在 完整 的 音频 和 视频 标准 。 尽 管 HTML 5 提供 了 音频 和 视频 的 规 
范 ， 但 其 中 所 涉及 的 内 容 还 不 够 完善 。 

1. 流 式 音频 和 视频 

目前 的 HTML 5 视频 规范 中 ， 还 没有 比特 率 切换 标准 ， 所 以 对 视频 的 支持 仅 限 于 先 全 


部 加 载 完 毕 再 播放 的 方式 。 但 流 式 媒体 格式 是 比较 理想 的 格式 ， 在 未 来 的 设计 中 ， 肯 定 会 
在 这 方面 进行 规范 。 


2. 跨 源 资源 的 共享 


HTML 5 的 媒体 受到 HITP 跨 源 资源 共享 的 限制 。HTML 5 针对 跨 源 资源 的 共享 ， 提 
供 了 专门 的 规范 ， 这 种 规范 不 仅仅 局 限于 音频 和 视频 。 


3. 全 屏 控制 


从 安全 角度 讲 ， 浏 览 器 中 的 脚本 控制 范围 不 会 超出 浏览 器 之 外 。 如 果 需 要 控制 全 屏 操 
作 ， 可 能 还 需要 浏览 器 提供 相关 的 控制 功能 。 
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4. 字幕 支持 


如 果 在 HIML 5 中 对 音频 或 视频 进行 编程 ， 可 能 还 需要 对 字幕 的 控制 。 基 于 流行 的 字 
幕 格式 SRT 的 字幕 支持 规范 (WebSRT) 仍 在 编写 中 ， 尚 未 完全 纳入 规范 。 


5. 编 解 码 支 持 


使 用 HIML 5 媒体 标签 的 最 大 缺点 在 于 缺少 通用 编 解码 的 支持 。 随 着 时 间 的 推移 ，: 
终 会 形成 一 个 通用 的 、 高 效 的 编 解 码 器 ， 到 时 候 多 媒体 的 应 用 形式 会 比 现在 更 加 丰富 。 未 
来 的 发 展 趋势 ， 一 定 是 我 们 所 期 待 的 那样 ， 或 许 还 会 给 我 们 意外 的 惊喜 。 


没 


9.2 使 用 HTML 5 的 audio 和 video 元素 


audio 元 素 是 专门 用 来 在 网 页 中 播放 网 络 音 频 的 ，video 元 素 是 专门 用 来 在 网 页 中 播放 
视频 的 。 有 了 这 两 个 元 素 , 就 不 再 需要 其 他 任何 插件 了 ， 只 要 浏览 器 支持 HTML 5 就 可 以 。 

HTML 5 为 audio 和 video 元 素 提供 的 接口 ， 包 含 了 一 系列 的 属性 、 方 法 和 事件 ， 这 些 
接口 可 以 帮 我 们 完成 针对 音频 和 视频 的 操作 。 这 两 个 元 素 在 使 用 方法 和 形式 上 都 很 类 似 ， 
下 面 就 一 起 来 介绍 这 两 个 元 素 。 


9.2.1 在 网 页 中 使 用 audio 和 video 


1. 在 页 面 中 加 入 音频 和 视频 


这 两 个 元 素 的 使 用 方法 都 比较 简单 ,首先 以 audio 元 素 为 例 , 只 要 指定 audio 标签 属性 
src 的 值 为 一 个 音频 源 文件 的 路 径 就 可 以 了 ， 如 下 所 示 : 

<audio src="resources/audio.mp3"> 

你 的 浏览 器 不 支持 audio 元 素 

</audio> 

通过 这 种 方法 可 以 把 音频 数据 嵌入 到 网 页 上 ， 如 果 浏 览 器 不 支持 HIML 5 的 audio 元 
素 ， 将 会 显示 替代 文字 “你 的 浏览 器 不 支持 audio 元 素 ”。 这 种 不 兼容 的 提示 与 Canvas 标 
签 是 一 样 的 ， 也 是 HTML 5 处 理 不 兼容 的 统一 方法 。 

在 网 页 中 使 用 video 元 素 添 加 视频 ， 与 audio 相似 ， 还 可 以 设置 video 元 素 的 尺寸 ， 如 
下 所 示 : 

<video src="resources/video.mp4" width="600" height="400"> 

你 的 浏览 器 不 支持 video 元 素 

</video> 

通过 这 种 方法 即 可 把 视频 添加 到 网 页 中 ， 浏 览 器 不 兼容 时 ， 显 示 蔡 代 文 字 “ 你 的 浏览 
器 不 支持 video 元 素 ”。 对 于 兼容 性 的 处 理 方法 ， 也 可 以 增加 更 加 丰富 的 标签 内 容 ， 或 者 
增加 Flash 的 替代 方案 。 
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2. 使 用 source 元 素 


由 于 各 种 浏览 器 对 音频 和 视频 的 编 解码 器 的 支持 不 一 样 ， 为 了 能 够 在 各 种 浏览 器 中 都 
能 正常 使 用 ， 可 以 提供 多 个 源 文件 。 这 需要 使 用 source 元 素 为 audio 元 素 或 video 元 素 提 
供 多 个 备用 多 媒体 文件 ， 如 下 所 示 : 


<audio src="resources/audio.mp3"> 
<source src="song.ogg" type="audio/o0gg"> 
<source src="song.mp3" type="audio/mpeg"> 
你 的 浏览 器 不 支持 audio 元 素 

</audio> 


或 

<video src="resources/video.mp4" width="600" height="400" controls> 
<source src="movie.ogg" type="video/ogg codes=' theora,vorbis、 "> 
<source src="movie.mp4" type="video/mp4"> 
你 的 浏览 器 不 支持 video 元 素 

</video> 

由 上 面 可 以 看 出 ， 我 们 使 用 source 元 素 奉 代 了 audio 或 video 的 标签 属性 src。 这 样 ， 
浏览 器 可 以 根据 自身 的 播放 能 力 ， 按 照 顺 序 自动 选择 最 佳 的 源 文件 进行 播放 。 

此 外 source 元 素 有 几 个 属性 : src 属性 用 于 指定 媒体 文件 的 URL 地址; type 属性 用 于 
指定 媒体 文件 的 类 型 ， 属 性 值 为 媒体 文件 的 MIME 类 型 ， 该 属性 值 还 可 以 通过 codes 参数 
指定 编码 格式 。 为 了 提高 执行 效率 ， 定 义 详 细 的 type 属性 是 必要 的 。 

3. 使 用 脚本 检测 浏览 器 的 标签 支持 情况 

也 可 以 使 用 脚本 来 判断 浏览 器 是 否 支持 audio 元 素 或 video 元 素 。 可 以 使 用 脚本 动态 地 
创建 它 ， 并 检测 是 否 存 在 ， 脚 本 如 下 所 示 : 


var support = !!document.createElement ("audio") .canPlayType; 


这 段 脚 本 会 动态 创建 audio 元 素 ， 然 后 检查 canPlayType0 〇 函数 是 否 存在 。 通 过 执行 两 
次 逻辑 非 运 算 符 “!1”, 将 其 结果 转化 成 布尔 值 ， 就 可 以 确定 音频 对 象 是 否 创建 成 功 。 同样 ， 
video 元 素 也 可 以 这 样 去 检查 。 


9.2.2 audio 和 video 的 特性 和 属性 


audio 和 video 的 特性 〈attributes) 是 用 于 网 页 标签 的 ，audio 和 video 的 接口 属性 
(properties) ， 用 于 针对 多 媒体 的 编程 。 下 面 分 别 进行 介绍 。 


1. 元 素 的 标签 特性 (attributes) 


口 src 
源 文 件 特性 : 用 于 指定 媒体 文件 的 URL 地 址 。 
口 autoplay 


自动 播放 特性 : 表示 媒体 文件 加 载 后 自动 播放 。 该 属性 在 标签 中 的 使 用 方法 如 下 所 示 : 
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<video src="resources/video.mp4" autoplay></video> 


口 controls 
控制 条 特性 : 表示 为 视频 或 音频 添加 自 带 的 播放 控制 条 。 控 制 条 中 包括 播放 /暂停 、 进 
度 条 、 进 度 时 间 和 音量 控制 等 。 该 属性 在 标签 中 的 使 用 方法 如 下 所 示 : 


<video src="resources/video.mp4" controls></video> 


如 图 9-1 所 示 为 Chrome 浏览 器 自 带 的 控制 条 。 


| 01:00 中 ) 


图 9-1 Chrome 自 带 的 播放 控制 条 


口 loop 
循环 特性 : 表示 音频 或 视频 循环 播放 。 该 属性 在 标签 中 的 使 用 方法 如 下 : 


<video src="resources/video.mp4" controls loop></video> 


口 preload 

预 加 载 特 性 ， 表 示 页 面 加 载 完 成 后 ， 如 何 加 载 视频 数据 。 

该 特性 有 三 个 值 : none 表示 不 进行 预 加 载 ，metadata 表示 只 加 载 媒体 文件 的 元 数据 ; 
auto 表示 加 载 全 部 视频 或 音频 。 默 认 值 为 auto。 用 法 如 下 : 


<video src="resources/video.mp4" controls preload=”"auto”></video> 


如 果 设 置 了 autoplay 属性 ， 则 忽略 preload 属性 。 

口 poster (video 元 素 独 有 的 特性 ) 

替代 内 容 属性 : 用 于 指定 一 幅 奉 代 图 片 的 URL 地 址 ， 当 视频 不 可 用 时 ， 会 显示 该 替 
代 图 片 。 用 法 如 下 : 


<video src="resources/video.mp4" controls poster=”images/none.jpg’”> 
</video> 


口 width 和 height (video 元 素 独 有 的 特性 ) 
宽度 和 高 度 特性 : 用 于 指定 视频 的 宽度 和 高 度 ， 单 位 是 像素 ， 使 用 方法 如 下 : 


<video src="resources/video.mp4" width="600" height="400" controls> 
</video> 


2. 接口 属性 (properties) 


口 currentSrec (只 读 ) 

获取 当前 正在 播放 或 已 加 载 的 媒体 文件 的 URL 地 址 。 
口 videoWidth (只 读 ，video 元 素 特 有 属性 ) 

获取 视频 原始 的 宽度 。 

口 videoHeight (只 读 ，video 元 素 特有 属性 ) 

获取 视频 原始 的 高 度 。 
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区 /设置 媒体 文件 播放 时 是 否 静 音 。true 表示 静音 ;false 表示 消除 静音 。 
ended (只 读 ) 

如 果 媒 体 文件 已 经 播放 完毕 ， 则 返回 te， 否则 返回 false。 

口 played (内 读 ) 

获取 已 播放 媒体 的 TimesRanges 对 象 ， 该 对 象 内 容 包括 已 播放 部 分 的 开始 时 间 和 结束 
时 间 。 

口 paused (只 读 ) 

如 果 媒 体 文件 当前 是 暂停 的 或 未 播放 ， 则 返回 tue， 和 否则 返回 false。 

口 eror〈 只 读 ) 

读 取 媒 体 文件 的 错误 代码 。 正 常情 况 下 ,error 属性 值 为 null; 有 错误 时 ,返回 MediaError 
对 象 code。 

code 有 4 个 错误 状态 值 。 
> MEDIA ERR ABORTED ( 值 为 1) : 中 止 。 媒 体 资 源 下 载 过 程 中 ， 由 于 用 户 


口 _ currentTime 

获取 /设置 当前 媒体 播放 位 置 的 时 间 点 ， 单 位 为 s ( 秒 ) 。 

口 startTime (只 读 ) 

获取 当前 媒体 播放 的 开始 时 间 ， 通 常 是 0。 

口 duration (只 读 ) 

获取 整个 媒体 文件 的 播放 时 长 ， 单 位 为 s〈 秒 ) 。 如 果 无 法 获取 ， 则 返回 NaN。 
口 volume 

获取 /设置 媒体 文件 播放 时 的 音量 ， 取 值 范围 在 0.0 到 0.1 之 间 。 
口 mnuted 

获 

口 


操作 原因 而 被 中 止 。 

> MEDIA_ERR_NETWORK ( 值 为 2) : 网 络 中 断 。 媒 体 资源 可 用 ， 但 下 载 出 现 
网 络 错误 而 中 止 。 

> MEDIA_ERR_ DECODE ( 值 为 3) : 解码 错误 。 媒 体 资源 可 用 ， 但 解码 时 发 生 
了 错误 。 

> MEDIA_ERR_SRC NOT_SUPPORTED ( 值 为 4) : 不 支持 格式 。 媒 体格 式 不 


口 seeking (只 读 ) 
获取 浏览 器 是 否 正 在 请 求 媒体 数据 。true 表示 正在 请 求 ，false 表示 停止 请 求 。 
口 seekable (只 读 ) 
获取 媒体 资源 已 请 求 的 TimesRanges 对 象 ， 该 对 象 内 容 包括 已 请 求 部 分 的 开始 时 间 和 
结束 时 间 。 
口 networkState (只 读 ) 
获取 媒体 资源 的 加 载 状态 。 该 状态 有 如 下 4 个 值 。 
> NETWORK EMPTY ( 值 为 0) : 加 载 的 初始 状态 。 
> NETWORK IDLE ( 值 为 1) : 已 确定 编码 格式 ， 但 尚未 建立 网 络 连接 。 
> NETWORK LOADING ( 值 为 2) : 媒体 文件 加 载 中 。 
> NETWORK NO_SOURCE ( 值 为 3) : 没有 支持 的 编码 格式 ， 不 加 载 。 
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口 buffered (只 读 ) 
获取 本 地 缓存 的 媒体 数据 的 TimesRanges 对 象 。TimesRanges 对 象 可 以 是 个 数组 。 
口 readyState (只 读 ) 
获取 当前 媒体 播放 的 就 绪 状 态 。 共 有 如 下 5 个 值 。 
> HAVE NOTHING 〈 值 为 0) : 还 没有 获取 到 媒体 文件 的 任何 信息 。 
> HAVE METADATA ( 值 为 1) : 已 获取 到 媒体 文件 的 元 数据 。 
> HAVE CURRENT DATA ( 值 为 2) : 已 获取 到 当前 播放 位 置 的 数据 ， 但 没有 
下 一 帧 的 数据 。 
> HAVE FUTURE DATA ( 值 为 3) : 已 获取 到 当前 播放 位 置 的 数据 ， 且 包含 下 
一 帧 的 数据 。 
> HAVE _ ENOUGH DATA ( 值 为 4) : 已 获取 足够 的 媒体 数据 ， 可 正常 播放 。 
口 playbackRate 
获取 /设置 媒体 当前 的 播放 速率 。 
口 defaultPlaybackRate 
获取 /设置 媒体 默认 的 播放 速率 。 


3. 接口 属性 的 使 用 方法 


下 面 通过 一 个 简单 的 示例 来 演示 接口 属性 的 使 用 方法 。 
【示例 9-2】 视频 播放 快 进 。 


<!DOCTYPEHTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 视 频 播放 快 进 </title> 
<script type="text/javascript"> 
function Forward(){ 
Var el=document .getElementById("myPlayer"); 


var time=el.currentTime; /* 获取 属性 currentTime */ 
el.currentTime=time+600; /* 设置 属性 currentTime， 快 进 600s */ 
;; 
</seript> 
</head> 
<body> 


<video id="myPlayer" src="resources/video.mp4" width="600" height="400" 
controls> 

</video><br /> 

<input type="button" value=" 快 进 " onClick="Forward()" /> 

</body> 

</html> 


运行 结果 如 图 9-2 所 示 。 
代码 分 析 : 在 示例 9-2 中 ， 首 先 通 过 脚本 获取 video 对 象 的 currentTime， 加 上 600 秒 


( 即 10 分 钟 ) 后 再 赋值 给 对 象 的 currentTime 属性 ， 即 可 实现 每 次 快 进 10 分 钟 。 由 于 


currentTime 属性 是 可 读 可 写 的 ， 因 此 可 以 给 它 赋值 。 


如 果 接 口 属性 是 只 读 属性 ， 则 只 能 获取 该 属性 的 值 ， 不 能 给 该 属性 赋值 。 接 口 属性 不 


能 用 于 video 标签 中 ， 只 能 通过 脚本 访问 。 
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辐 播放 器 中 的 块 进 
CQ@yzw740:5 


2:00:00 ) 


图 9-2 视频 播放 快 进 


9.2.3 audio 和 video 的 方法 


HTML 5 为 audio 和 video 元 素 提 供 了 同样 的 接口 方法 ， 下 面 一 起 介绍 。 


1. 接口 方法 

口 load0 

加 载 媒体 文件 ， 为 播放 做 准备 。 通 常用 于 播放 前 的 预 加 载 ; 还 会 用 于 重新 加 载 媒体 
文件 。 

DO play0 


动 把 


播放 媒体 文件 。 如 果 视 频 没有 加 载 ， 则 加 载 并 播放 ， 如 果 是 暂停 的 ， 则 变 为 播放 ， 自 


paused 属性 变 为 false。 

口 pause() 

暂停 播放 媒体 文件 。 自 动 把 paused 属性 变 为 true。 

口 canPlayTypeO 

测试 浏览 器 是 否 支 持 指定 的 媒体 类 型 。 该 方法 的 语法 如 下 : 


canPlayType (<type>) 


<type>: 指定 的 媒体 类 型 ， 与 source 元 素 的 type 参数 的 指定 方法 相同 。 指 定 方式 如 : 
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“video/mp4”， 指 定 为 媒体 文件 的 MIME 类 型 ， 该 属性 值 还 可 以 通过 codes 参数 指定 编码 
格式 。 

该 方法 可 有 如 下 3 个 返回 值 。 

口 空 字符 串 : 表示 浏览 器 不 支持 指定 的 媒体 类 型 。 

口 maybe: 表示 浏览 器 可 能 支持 指定 的 媒体 类 型 。 

口 probably: 表示 浏览 器 确定 支持 指定 的 媒体 类 型 。 


2. 接口 方法 的 使 用 


下 面 通过 一 个 简单 的 示例 来 演示 接口 方法 的 使 用 。 
【示例 9-3】 播放 与 暂停 。 


<!DOCTYPEHTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 播 放 与 暂停 </title> 
<script type="text/javascript"> 
Var videogl=null; 
function Play(){ 
videoEl .play(); /* 播放 视频 */ 
} 
function Pause(){ 
videoEl.pause();  /* 暂停 播放 */ 
; 
window.onload=function(){ 
VideoEl=document .getElementById ("myPlayer"); 
} 
</script> 
</head> 
<body> 
<video id="myPlayer" width="600"> 
<source src="resources/video.mp4" type="video/mp4"> 
你 的 浏览 器 不 支持 video 元 素 
</video><br> 
<input type="button" value=" 播 放 " onclick="Play()" /> 
<input type="button" value=" 和 暂停 " onclick="Pause()" /> 
</body> 
</html> 


运行 结果 如 图 9-3 所 示 。 

代码 分 析 : 在 示例 9-3 中 ， 设 置 了 两 个 按钮 ， 分 别 控制 视频 的 播放 与 暂停 。“ 播 放 ” 
按钮 通过 定义 的 Play0 函 数 执 行 视频 的 接口 方法 play0; “暂停 ”按钮 通过 定义 的 PauseO 
函数 执行 视频 的 接口 方法 pause0。 如 图 9-3 所 示 ，“ 播 放 ” 和 “暂停 ”按钮 均 可 使 用 。 

有 了 这 些 接 口 方法 和 接口 属性 ， 如 果 你 不 喜欢 系统 自 带 的 控制 条 ， 大 可 以 自己 做 一 个 
好 看 的 。 
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辐 播放 与 暂停 
©C 加 yzw740 


播放 | | 暂停 


图 9-3 ”播放 与 暂停 


9.2.4 audio 和 video 的 事件 


HTML 5 还 为 audio 和 video 元 素 提 供 了 一 系列 的 接口 事件 。 在 使 用 audio 和 video 元 
素 读 取 或 播放 媒体 文件 的 时 候 ， 会 触发 一 系列 的 事件 ， 可 以 用 JavaScript 脚本 来 捕获 这 些 
事件 ， 并 进行 相应 的 处 理 。 

1. 捕获 事件 的 方式 

捕获 事件 有 两 种 方法 : 一 种 是 添加 事件 句柄 : 一 种 是 监听 。 

在 页 面 的 audio 或 video 标签 中 添加 事件 句柄 ， 如 下 所 示 : 


<video id="myPlayer" src="resources/video.mp4" width="600" onplay="video 
playing()"> </video> 


然后 就 可 以 在 函数 video_playing0 中 ， 添 加 需要 的 代码 。 监 听 方 式 : 


Var videoEl=document .getElementById ("myPlayer"); 
VideoEl .addEventListener ("play" ,video playing); /* 添加 监听 事件 */ 


2. 接口 事件 


口 play 
当 执 行 方法 play0 时 触发 。 
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口 playing 

正在 播放 时 触发 。 

口 pause 

当 执 行 了 方法 pauseO0 时 触发 。 

口 timeupdate 

当 播 放 位 置 被 改变 时 触发 。 可 能 是 播放 过 程 中 的 自然 改变 ， 也 可 
口 ended 

当 播放 结束 后 停止 播放 时 触发 。 

口 waiting 

在 等 待 加 载 下 一 帧 时 触发 。 

口 ratechange 

在 当前 播放 速率 改变 时 触发 。 

口 volumechange 

在 音量 改变 时 触发 。 

口 canplay 

以 当前 播放 速率 ， 需 要 缓冲 时 触发 。 
口 canplaythrough 

以 当前 播放 速率 ， 不 需要 缓冲 时 触发 。 
口 durationchange 

当 播 放 时 长 改变 时 触发 。 

口 loadstart 

当 浏 览 器 开始 在 网 上 寻找 数据 时 触发 。 
DD progress 

当 浏 览 器 正在 获取 媒体 文件 时 触发 。 
口 suspend 


当 浏 览 器 暂停 获取 媒体 文件 ， 且 文件 获取 并 没有 正常 结束 时 触发 。 


口 abort 
当中 止 获取 媒体 数据 时 触发 。 但 这 种 中 止 不 是 由 错误 引起 的 。 
口 error 


当 获取 媒体 过 程 中 出 错时 触发 。 


口 emptied 
当 所 在 网 络 变 为 初始 化 状态 时 触发 。 
DD stalled 


浏览 器 尝试 获取 媒体 数据 失败 时 触发 。 

口 loadedmetadata 

在 加 载 完 媒体 元 数据 时 触发 。 

口 loadeddata 

在 加 载 完 当前 位 置 的 媒体 播放 数据 时 触发 。 
口 seeking 
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浏览 器 正在 请 求 数据 时 触发 。 
口 seeked 
浏览 器 停止 请 求 数据 时 触发 。 


9.3 实验 室 : 自 定义 播放 工具 条 


audio 和 video 元 素 都 有 一 个 默认 的 播放 工具 条 ， 如 果 标 签 设置 controls 属性 ， 该 播放 
工具 条 就 会 显示 出 来 ， 使 用 起 来 也 非常 方便 。 但 对 于 设计 者 来 说 ， 千 篇 一 律 的 风格 ， 总 会 
让 人 厌倦 。 本 节 我 们 就 自己 定义 一 个 播放 工具 条 ， 可 以 按照 自己 的 风格 定义 。 

1. 案例 简介 


本 节 介 绍 的 案例 ， 是 定义 一 个 播放 工具 条 ， 主 要 功能 包括 : 播放 /暂停 、 快 进 、 慢 进 、 
前 进 、 后 退 、 静 音 、 音 量 等 控制 。 其 中 播放 和 和 暂停 是 同一 按钮 ， 会 根据 播放 状态 变换 ， 快 
进 和 慢 进 会 改变 播放 速度 ; 工具 条 右边 是 显示 关于 速率 和 时 间 进 度 的 信息 ; 上 面 还 有 一 个 
进度 条 ， 以 更 加 友好 地 显示 进度 ， 案 例 效果 图 如 图 9-4 所 示 。 


辐 自 定义 播放 工具 条 


CC yrr740:8080 


什么 ， 居 然 真 带 过 去 7 


lfps 111:58/125:50 


图 9-4 自 定义 播放 工具 条 


2. 网 页 基本 元 素 
【示例 9-4】 自 定义 播放 工具 条 。 
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<!DOCTYPEHTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 自 定义 播放 工具 条 </title> 
<style type="text/css"> 
… / * 样式 表 省 略 */ 
</style> 
</head> 
<body> 
<video id="myPlayer"” src="resources/video.mp4"> 你 的 浏览 器 不 支持 video 元 素 
</video> 
<!-- 播放 工具 条 --> 


<div id="controls"> 


<div id="bar"> < 诺 条 > 
<div id="progresss"></div> 
</div> 


<div id="slow" class="but" onclick="Slow()">7</div> <!-- 慢 进 --> 

<div id="play” class="but" onclick="Play (this)">4;</div><!-- 播放 /暂停 
= 

<div id="fast" class="but" onclick="Fast()">8</div><!-- 快 进 --> 


<div id="prev" class="but" onclick="Prev()">9</div><!-- 后 退 --> 
<div id="next" class="but" onclick="Next()">:</div><!-- 前 进 --> 


<div id="muted" onclick="Muted (this)">x</div><!-- 静音 控制 --> 
<div class="volume"> 


<!-- 音量 控制 ==> 
<input id="volume" type="range" min="0" max="1" step="0.1" 
onchange="Volume (this)" /> 
</div> 


<div class="info"> 
<span id="rate">1</span>fps <span id="info"></span> <!-- 速率 和 时 
间 进 度 的 信息 --> 
</div> 
</div> 
</body> 
</html> 


此 时 ， 有 了 样式 表 的 控制 ， 界 面 外 观 已 经 有 如 图 9-4 所 示 的 界面 效果 ， 但 还 没有 播放 
控制 功能 。 下 面 我 们 根据 案例 的 要 求 ， 逐 步 添 加 脚本 以 完善 播放 工具 条 的 功能 。 


3. 定义 全 局 的 视频 对 象 
为 了 方便 调用 视频 对 象 ， 我 们 把 视频 对 象 定义 为 全 局 变量 。 如 以 下 代码 所 示 : 


<script type="text/javascript"> 

/* 定义 全 局 视频 对 象 */ 

var videoEl=null; 

/* 网 页 加 载 完 毕 后 ， 读 取 视频 对 象 */ 

window-addEventListener ("1Lload"，function()1{ 
VideoEl=document .getElementById ("myPlayer") 


Fs 
</script> 
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4. 添加 播放 /暂停 、 前 进 和 后 退 功能 


播放 和 和 暂停 使 用 同一 个 按钮 。 暂 停 时 ， 播 放 功能 有 效 ， 可 点 击 播放 视频 ;播放 时 ， 暂 
停 功 能 有 效 ， 可 点 击 暂停 播放 。 前 进 和 后 退 ， 仪 仅 是 改变 了 currentTime 属性 的 值 。 


<script type="text/javascript"> 
/* 播放 /暂停 */ 
function Play(e){ 
if (videoEl .paused) { 
videoEl .play (); / * 如 果 暂 停 ， 则 播放 */ 
document .getElementById ("play") .innerHTML=";" 
/* 显示 暂停 的 文字 图 像 */ 
}elsef 
videoEl .pause(); / * 如 果 不 是 暂停 ， 则 暂停 */ 
document .getElementById ("play") .innerHTML="4"/* 显示 播放 的 文字 图 像 */ 
} 
} 
/* 后 退 : 后 退 一 分 钟 */ 
function Prev(){ 
videoE1.currentTime-=60;/ * currentTime 属性 减 去 60s， 即 向 后 倒退 一 分 钟 */ 
} 
/* 前 进 : 前 进 一 分 钟 */ 
function Next(){ 
VideoEl1.currentTime+=60; /*currentTime 属性 增加 60s, 即 向 前 前 进 一 分 钟 */ 
下 
</script> 


5. 添加 慢 进 和 快 进 功能 


慢 进 和 快 进 是 通过 改变 速率 来 实现 的 。 默 认 速率 为 1。 当 速率 小 于 1 时 ,每 次 改变 0.2 
的 速率 ， 当 速率 大 于 1 时 ， 每 次 改变 的 速率 为 1。 速 率 改变 后 ， 会 在 播放 工具 条 中 显示 
出 来 。 

<script type="text/javascript"> 

/* 慢 进 : 小 于 等 于 1 时 ， 每 次 只 减 慢 0. 2 的 速率 ， 大 于 1 时 ， 每 次 减 1 */ 

function Slow(){ 

if (videoEl .playbackRate<=1) 
VideoEl .playbackRate-=0.2; 
elsef{ 
VideoEl .playbackRate-=1; 
} 
document .getElementById("rate") .innerHTML=fps2fps (videoEl .playbackRa 
te) ; /* 显示 播放 速率 */ 


} 
/* 快 进 : 小 于 1 时 ， 每 次 只 加 快 0.2 的 速率 ， 大 于 1 时 ， 每 次 加 1*/ 
function Fast(){ 
if (videoEl .playbackRate<]1) 
VideoEl] .playbackRate+=0.2; 
elsetf 
VideoE1.PLaybackRate+=I1: 
} 
document .getElementById ("rate") .innerHTML=fps2fps (videoEl .playbackRa 
te); /* 显示 播放 速率 */ 


“Ds 


第 9 章 便捷 的 音频 和 视频 


事件 中 ， 以 便 能 实时 更 新 进度 信 


/* 速率 数值 处 理 */ 
function fps2fps (fps){ 
if (fps<1) 
return fps.toFixed(1); 
else 
return fps 


|}; 
</script> 


6. 添加 静音 和 音量 的 功能 


静音 时 ， 音 量 为 0， 不 静音 时 ， 音 量 还 原 为 视频 的 音量 。 音 量 是 通过 拖 动 滑 块 来 调整 
当 拖 动 滑 块 时 ， 即 触发 事件 ， 修 改 视频 的 音量 。 


<script type="text/javascript"> 
/* 静音 */ 
function Muted(e) { 
if(videoEl .muted){ 
videoE]l .muted=false; /* 消除 静音 */ 
e.innerHTML="X"; /* 显示 声音 的 文字 图 标 */ 
document .getElementById ("volume") .value=videoEl .volume; 


/* 还 原音 量 */ 


}elsel{ 
videoE1l .muted=true; /* 静音 */ 
e.innerHTML="x"; /* 显示 静音 的 文字 图 标 */ 


document .getElementById ("volume") .value=0; /* 音量 修改 为 0 */ 
上 
/* 调整 音量 */ 
function Volume (e){ 
videoE1.volume=e.value; /* 修改 音量 的 值 */ 


</script> 


7. 添加 进度 显示 功能 


网 页 加 载 完成 后 , 执行 进度 处 理 函 数 , 并 把 进度 处 理 函数 添加 至 视频 对 象 的 timeupdate 
息 。 


<script type="text/javascript"> 

/* 进度 信息 : 控制 进度 条 ， 并 显示 进度 时 间 */ 

function Progresss(){ 
var el=document .getElementById("progresss"); 
el.style.width = (videoEl] .currentTime/videoEl.duration)*720 +"px" 
document .getElementById ("info") .innerHTML=s2time (videoE]l .current 
Time)+"/"+s2time (videoEl .duration); 


} 

/* 把 秒 处 理 为 时 间 格 式 */ 

function s2time(s){ 
Var m=parseFloat (s/60) .toFixed(0); 
s=parseFloat (s%60) .toFixed(0); 
return (msl02" 0 Emm (se102"0"raaa)s 


/* 网 页 加 载 完 毕 后 ， 把 进度 处 理 函数 添加 至 视频 对 象 的 timeupdate 事件 中 */ 
window.addEventListener ("load", 
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function() {videoEl .addEventListener ("timeupdate" ,Progresss)}) : 

/* 给 window-onload 事件 添加 进度 处 理 函 数 */ 

window.addEventListener ("Lload" ,Progresss) 

</script> 

至 此 ， 播 放 工 具 条 的 功能 已 经 完成 。 此 时 ， 点 击 播放 工具 条 中 的 按钮 ， 都 能 操作 播放 
中 的 视频 。 


9.4 小 结 


本 章 主要 讲解 了 HTML 5 的 音频 和 视频 在 互联 网 方面 的 发 展 轨迹 , 以 及 接口 中 的 属性 、 
方法 和 事件 。 重 点 讲解 了 音频 和 视频 的 基础 知识 、HTML 5 提供 的 音频 和 视频 的 接口 及 如 
何 使 用 这 些 接 口 。 在 实验 的 案例 中 ， 演 示 了 主要 的 接口 属性 、 方 法 和 事件 。 比 较 难 的 是 对 
媒体 文件 中 的 元 数据 概念 的 理解 ， 音 频 和 视频 都 包含 两 类 属性 ， 容 易 混淆 ， 这 也 是 本 章 的 
难点 。 下 一 章 ， 我 们 将 介绍 HTML 5 在 表单 方面 的 改进 。 


95- 汉 题 


【习题 1】 如 何在 网 页 中 使 用 音频 和 视频 ? 
【习题 2】 如 何在 网 页 中 加 入 循环 播放 的 视频 ? 
【习题 3】HTML 5 为 音频 和 视频 提供 了 哪些 可 用 的 方法 ? 
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一 直 以 来 ,表单 都 是 Web 的 核心 技术 之 一 , 多 数 在 线 应 用 都 是 通过 表单 来 交互 完成 的 。 
作为 交互 的 数据 载体 ， 有 必要 为 用 户 提供 更 加 友好 的 操作 和 严谨 的 表单 验证 ， 这 对 于 大 多 
数 Web 开发 人 员 来 说 ， 是 一 直 在 做 的 事情 。 如 今 ，HTML 5 正在 努力 地 简化 我 们 的 工作 。 
为 此 ，HTML 5 不 但 增加 了 一 系列 功能 性 的 表单 、 表 单元 素 、 表 单 特性 ， 还 增加 了 自动 验 
证 表单 的 功能 。 正 如 您 所 期 待 的 那样 ， 一 切 将 变 得 不 可 思议 。 本 章 将 深入 探讨 HTML 5 的 
表单 技术 。 


10.1 HTML 5 表单 概述 


HTML 5 对 表单 的 发 展 ， 是 适应 互联 网 发 展 的 需要 ， 也 是 在 适应 开发 者 的 需要 。 相 比 
以 前 ，HTML 5 的 表单 功能 有 了 革命 性 的 改变 。 


10.1.1 HTML 表单 的 进化 


1. 早期 的 发 展 


早 在 20 世纪 90 年 代 的 HIML 4 规范 中 ， 表 单 功能 已 经 发 展 得 非常 完善 。HTML 4 的 
表单 很 单纯 ， 支 持 最 基本 的 数据 和 输入， 所 有 的 表单 应 用 都 可 以 使 用 ， 时 至 今日 ， 我 们 仍然 
在 使 用 它 。 

随 着 Web 应 用 的 发 展 , 表单 功能 太 过 简单 , 在 处 理 复杂 业务 的 过 程 中 , 显得 能 力 有 限 ， 
而 且 还 受到 网 络 设备 的 限制 。 基 于 这 个 原因 ， 出 现 了 基于 XML 的 XHTML 规范 ， 于 此 同 
时 出 现 了 Xform 表单 ， 基 于 HTML 4 的 表单 也 停止 了 发 展 。 

XForms 试图 突破 当前 HTML Forms 模型 的 一 些 限制 , 而 且 XForms 的 最 大 特色 是 包含 
了 客户 端 验证 的 功能 ， 避 免 使 用 大 量 的 JavaScript 脚本 验证 。 在 当时 ，XForm 被 称 为 “下 
一 代 Web 表单 ”。 

由 于 XForms 是 基于 XML 的 ， 在 一 定 程度 上 弱化 了 标签 本 身 的 功能 ， 由 于 其 比较 灵 
活 ， 表 单 也 跟着 复杂 了 。 这 在 实际 的 使 用 过 程 中 ， 并 没有 得 到 广泛 的 发 展 。 


2. HTML 5 表单 的 出 世 


在 实际 的 表单 应 用 中 ， 一 些 特 殊 的 数据 输入 需要 一 个 独立 的 规则 ， 如 邮件 、 网 址 等 ， 
我 们 都 会 提供 一 个 特定 的 格式 限定 和 验证 。 
由 于 移动 互联 网 的 快速 发 展 ， 在 面向 移动 设备 的 时 候 ， 通 过 识别 表单 类 型 ， 可 以 提供 
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更 友好 的 用 户 体验 ， 如 可 以 呈现 不 同 的 屏幕 键盘 等 。 

HTML 5 的 表单 ， 在 原 有 表单 的 基础 上 ， 参 照 Xform 的 一 些 验证 功能 ， 再 结合 实际 发 
展 的 需要 ， 制 定 了 新 型 的 功能 性 表单 ， 并 且 支 持 表单 验证 。 

在 做 表单 处 理 的 时 候 ， 最 常用 的 就 是 表单 验证 了 。 一 般 的 验证 会 写 很 多 元 长 的 
JavaScript 代码 , 或 者 借助 一 些 基 于 JavaScript 的 验证 框架 , 如 目前 比较 流行 的 jQuery 的 验 
证 框架 。HTML 5 发 展 了 这 些 表单 ， 把 具有 特定 规则 意义 的 表单 ， 扩 展 一 些 特有 的 特性 ， 
作为 表单 的 原始 功能 ， 验 证 表单 的 功能 ， 也 作为 表单 本 身 应 具备 的 功能 ， 原 生地 被 支持 。 

HTML 5 的 表单 ， 无 论 是 在 表现 方面 还 是 在 功能 方面 都 非常 优越 ， 开 发 起 来 可 以 不 用 
那么 复杂 。HTML 5 的 表单 的 目的 就 是 让 这 一 切 友好 的 应 用 变 得 简单 。 


10.1.2 ”当前 的 支持 情况 


由 于 HIML 5 的 规范 还 在 渐进 发 展 中 ， 各 个 浏览 器 的 支持 程度 也 不 一 样 ， 因 此 在 使 用 
HTML 5 表单 功能 时 ， 应 尽量 避免 滥用 ， 最 好 再 提供 蔡 代 解 决 方案 。 

根据 HIML 5 的 设计 原则 ， 在 旧 的 浏览 器 中 ， 新 的 表单 空间 会 平滑 降级 ， 不 需要 判断 
浏览 器 的 支持 情况 。 
虽然 HTML 5 表单 的 一 些 规范 还 没有 获得 浏览 器 的 支持 ， 但 仍然 可 以 借鉴 表单 规范 的 
设计 思想 为 我 所 用 ， 如 果 浏 览 器 不 支持 ， 我 们 就 通过 其 他 方式 帮助 实现 。 


10.2 新 增 表 单 输入 类 型 


HTML 5 大 幅度 地 改进 了 input 元 素 的 类 型 。 不 同类 型 的 表单 所 附加 的 功能 也 不 相同 。 
到 目前 为 止 ， 支 持 最 多 、 最 全 面 的 是 Opera 10 浏览 器 。 对 于 不 支持 新 增 表单 类 型 的 浏览 器 
来 说 ， 会 默认 识别 为 text 类 型 。 


10.2.1 新 增 的 表单 输入 类 型 

这 些 新 增 的 表单 类 型 不 但 方便 进行 表单 验证 ， 而 且 在 用 户 体验 方面 留 下 了 极 大 的 提升 
空间 。 下 面 针 对 这 些 input 元 素 的 类 型 逐步 讲解 。 

1. url 类 型 


url 类 型 的 input 元 素 ， 是 专门 为 输入 url 地 址 定义 的 文本 框 。 在 验证 输入 文本 的 格式 
时 ， 如 果 该 文本 框 中 的 内 容 不 符合 url 地 址 的 格式 ， 会 提示 验证 错误 。 该 表单 类 型 的 使 用 
方法 如 下 : 

<input type="url" name="webUr]l" id="webUr1l" value="http://www.baidu.com" 

J 

2. email 类 型 

email 类 型 的 input 元 素 ， 是 专门 为 输入 E-mail 地 址 定义 的 文本 框 。 在 验证 输入 文本 的 
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格式 时 ， 如 果 该 文本 框 中 的 内 容 不 符合 E-mail 地 址 的 格式 时 ， 会 提示 验证 错误 。 该 表单 类 
型 的 使 用 方法 如 下 : 

<input type="email" name="myEmail" id="myEmail" value="yxw740@163.com" /> 

此 外 email 类 型 的 input 元 素 还 有 一 个 multiple 属性 ,表示 在 该 文本 框 中 可 输入 用 逗号 
隔 开 的 多 个 邮件 地 址 。 

3，range 类 型 

Iange 类 型 的 input 元 素 把 输入 框 显示 为 滑动 条 ， 为 某 一 特定 范围 内 的 数值 选择 器 。 它 
还 具有 min 和 max 特性 ， 表 示 选 择 范 围 的 最 小 值 (默认 为 0) 和 最 大 值 〈 默 认为 100) 
还 有 step 特性 ， 表 示 拖 动 步 长 (默认 为 1) 。 该 表单 类 型 的 显示 效果 如 图 10-1 所 示 。 该 表 
单 类 型 的 使 用 方法 如 下 : 


<input type="range" name="volume" id="volume" min="0" max="1" step="0.2" 
/> 


4. number 类 型 


number 类 型 的 input 元 素 是 专门 为 输入 特定 的 数字 而 定义 的 文本 框 。 与 range 类 似 ， 
都 具有 min、max 和 step 特性 ， 表 示人 允许 范围 的 最 小 值 、 最 大 值 和 调整 步 长 。 该 表单 类 型 
的 显示 效果 如 图 10-2 所 示 ， 该 表单 类 型 的 使 用 方法 如 下 : 


<input type="number" name="score" id="score" min="0" max="10" step="0.5" 
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图 10-1 range 类 型 的 外 观 图 10-2 ”number 类 型 的 外 观 


5. tel 类 型 
tel 类 型 的 input 元 素 是 专门 为 输入 电话 号 码 而 定义 的 文本 框 ， 没 有 特殊 的 验证 规则 。 
6. search 类 型 


search 类 型 的 input 元 素 是 专门 为 输入 搜索 引擎 关键 词 定 义 的 文本 框 , 没有 特殊 的 验证 
规则 。 


7. color 类 型 
color 类 型 的 input 元素 ， 默 认 会 提供 一 个 颜色 选择 器 ， 主 流 浏览 器 还 没有 支持 它 。 
8. date 类 型 


date 类 型 的 input 元 素 是 专门 用 于 输入 日 期 的 文本 框 ， 默 认为 带 日 期 选择 器 的 输入 框 ， 
目前 仅 Opera 浏览 器 支持 它 。 
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9. month、week、time、datetime、datetime-local 类 型 


month、week、time、datetime、datetime-local 类 型 的 input 元 素 与 date 类 型 的 input 元 
素 类 似 ， 都 会 提供 一 个 相应 的 选择 器 。 其 中 ，month 会 提供 一 个 月 选择 器 ;week 会 提供 一 
个 周 选择 器 ;time 会 提供 时 间 选 择 器 ;datetime 会 提供 完整 的 日 期 和 时 间 (包含 时 区 ) 的 
选择 器 ;datetime-local 也 会 提供 完整 的 日 期 和 时 间 (不 包括 时 区 ) 选择 器 。 


10.2.2 面向 未 来 的 新 型 表单 


就 目前 而 言 ， 使 用 HTML 5 新 增 的 表单 输入 类 型 ， 表 现 出 来 的 好 处 是 非常 有 限 的 ， 还 
要 处 理 向 下 的 兼容 性 ， 从 某 种 角度 讲 ， 反 而 增加 了 工作 量 。 

或 许 有 人 会 问 ， 定 义 这 么 多 的 表单 类 型 是 多 此 一 举 。 因 为 在 表单 验证 方面 ， 对 于 很 多 
类 型 的 表单 ， 使 用 传统 的 方法 也 能 轻松 完成 。 

HTML 5 的 表单 设计 的 功能 主要 面向 两 方面 : 一 方面 是 用 于 表单 验证 ， 但 不 是 每 个 新 
增 的 表单 类 型 ， 都 有 非常 具体 的 验证 规则 ， 另 一 方面 是 用 于 未 来 移动 设备 中 ， 通 过 识别 表 
单 类 型 来 提供 更 加 具体 而 友好 的 用 户 体验 ， 才 是 新 增 表单 类 型 的 主要 目的 。 

例如 ， 在 iPhone 上 ， 当 输入 邮件 时 ， 会 提供 一 个 带 有 @ 符 号 的 屏幕 键盘 ， 不 符合 邮件 
规范 的 特殊 符号 则 不 显示 。 

在 未 来 的 移动 设备 上 ， 键 盘 将 在 屏幕 内 显示 ， 鼠 标 也 将 消失 。 这 方面 已 经 在 苹果 设备 
上 充分 体现 ， 代 表 了 未 来 的 方向 。HTML 5 顺应 了 移动 互联 网 的 发 展 趋势 ， 在 移动 设备 的 


HTML 5 在 走向 移动 互联 网 的 过 程 中 ,对 表单 在 这 方面 的 改进 ， 是 一 种 前 瞻 性 的 设计 ， 
是 面向 未 来 的 设计 。 


10.3 ”新 增 表单 特性 及 元 素 


如 果 开 发 一 个 用 户 体验 非常 好 的 页 面 ， 潜 在 地 需要 写 大 量 的 代码 ， 而 且 还 需要 考虑 兼 
容 性 问题 。 使 用 HTML 5 表单 的 某 些 特性 ， 可 以 开发 出 前 所 未 有 的 页 面 效果 ， 可 以 写 更 少 
的 代码 ， 并 能 解决 传统 开发 中 碰 到 的 一 些 问 题 。 


1. form 特 性 


通常 ， 从 属于 表单 的 元 素 必须 放 在 表单 内 部 。 但 是 在 HTML 5 中 ， 可 以 把 从 属于 表单 
的 元 素 放 在 任何 地 方 , 然后 指定 该 元 素 的 form 特性 值 为 表单 的 id, 这 样 该 元 素 就 从 属于 表 
单 了 。form 特性 的 使 用 方法 如 示例 10-1 所 示 。 

【示例 10-1】 form 特性 的 使 用 方法 。 


<input name="name" type="text" form="forml" required /> 
<form id="form1"> 

<input type="submit" value=" 提 交 " /> 
</form> 
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代码 分 析 : 在 示例 10-1 中 ， 可 输入 的 input 元 素 在 表单 form 之 外 ， 由 于 input 元 素 的 
form 特性 值 指 定 了 表单 的 ia， 说 明 该 元 素 从 属于 表单 。 当 点 击 提交 按钮 时 ， 会 验证 该 从 属 
元 素 。 目 前 ，form 特性 已 获得 多 个 主流 浏览 器 的 支持 。 


2. formaction 特 性 


每 个 表单 都 会 通过 action 特性 把 表单 内 容 提交 到 另外 一 个 页 面 。 在 HTML 5 中 ， 为 不 
同 的 提交 按钮 分 别 添加 formaction 特性 ， 该 特性 会 覆盖 表单 的 action 特性 ， 将 表单 提交 至 
不 同 的 页 面 。formaction 特性 的 使 用 方法 如 示例 10-2 所 示 。 

【示例 10-2】 formaction 特性 的 使 用 方法 。 


<form id="forml" method="post"> 
<input name="name" type="text" form="forml" /> 
<input type="submit" value=" 提 交 到 Pagel" formaction="?page=1" /> 
<input type="submit" value=" 提 交 到 Page2" formaction="?page=2" /> 
<input type="submit" value=" 提 交 到 Page3" formaction="?page=3" /> 
<input type="submit" value=" 提 交 " /> 
</form> 
代码 分 析 :在 示例 10-2 中 , 添加 了 4 个 提交 按钮 ,其 中 前 3 个 提交 按钮 设置 了 formaction 
特性 ， 提 交 表 单 时 ， 会 优先 使 用 formaction 特性 值 作为 表单 提交 的 目标 页 面 。 
目前 ，formaction 特性 已 获得 多 个 主流 浏览 器 的 支持 。 
3. formmethod、formenctype、formnovalidate 、formtarget 特 性 
这 4 个 特性 的 使 用 方法 与 formaction 特性 一 致 ， 设 置 在 提交 按钮 上 ， 可 以 覆盖 表单 的 
相关 特性 。formmethod 特性 可 歼 盖 表 单 的 method 特性 ;formenctype 特性 可 窗 盖 表单 的 
enctype 特性 ，formnovalidate 特性 可 有 履 盖 表单 的 novalidate 特性 ，formtarget 特性 可 歼 善 表 
单 的 target 特性 。 


4. placeholder 特 性 


当 用 户 还 没有 把 焦点 定位 到 输入 文本 框 的 时 候 , 可 以 使 用 placeholder 特性 向 用 户 提示 


如 下 : 

<input name="name" type="text" Placeholder=" 请 输入 关键 词 " /> 

显示 效果 如 图 10-3 所 示 。 

placeholder 特性 还 可 用 于 其 他 输入 类 型 的 input 元 素 ， 
如 url、email、number、search、tel 和 password 等 。 目 前 ， 
placeholder 特性 已 获得 多 个 主流 浏览 器 的 支持 。 图 10-3 ”使 用 placeholder 特性 


5. autofocus 特 性 


使 用 autofocus 特性 可 用 于 所 有 类 型 的 input 元 素 ， 当 页 面 加 载 完 成 时 ， 可 自动 获取 焦 
点 。 每 个 页 面 只 允许 出 现 一 个 有 autofocus 特性 的 input 元 素 。 如 果 为 多 个 input 元 素 设置 
了 autofocus 特性 ， 则 相当 于 未 指定 该 行为 。 该 特性 的 使 用 方法 如 下 : 


ss 
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<input name="key" type="text" autofocus /> 


自动 获取 焦点 的 功能 也 要 防止 滥用 。 如 果 页 面 加 载 缓 慢 ， 用 户 又 做 了 一 部 分 操作 ， 这 


个 主流 浏览 器 的 支持 。 
6. autocomplete 特 性 


IE 的 早期 版 本 就 已 经 支持 autocomplete 特性 。autocomplete 特性 可 应 用 于 form 元 素 和 
输入 型 的 input 元素 ， 用 于 表单 的 自动 完成 。autocomplete 特性 会 把 输入 的 历史 记录 下 来 ， 
当 再 次 输入 的 时 候 ， 会 把 输入 的 历史 记录 显示 在 一 个 下 拉 列 表 里 ， 以 实现 自动 完成 输入 。 
该 特性 的 使 用 方法 如 下 : 


<input name="key" type="text" autocomplete="on" /> 


autocomplete 特性 有 3 个 值 ， 可 以 指定 “on”、“off” 和 “” (不 指定 ) 。 不 指定 值 
时 ， 使 用 浏览 器 的 默认 设置 。 由 于 不 同 的 浏览 器 默认 值 不 相同 ， 因 此 当 需 要 使 用 自动 完成 
的 功能 时 ， 最 好 显 式 地 指定 该 特性 。 目 前 ，autofocus 特性 已 获得 所 有 主流 浏览 器 的 支持 。 


7. list 特 性 和 datalist 元 素 


通过 组 合 使 用 list 特性 和 datalist 元 素 ， 可 以 为 某 个 可 输入 的 input 元 素 定义 一 个 选 值 
列表 。 使 用 datalist 元 素 构造 选 值 列表 ; 设置 input 元 素 的 list 特性 值 为 datalist 元 素 的 id 值 ， 
可 实现 二 者 的 绑 定 。 其 使 用 方法 如 示例 10-3 所 示 。 

【示例 10-3】 list 特性 和 datalist 元 素 的 使 用 方法 。 

<input name="email" type="email" list="emaillist" /> 

<datalist id="emaillist"> 

<option value="testl@test.com">testl@test.com</option> 
<option value="test2@test.com">test2@test .com</option> 

</datalist> 

运行 结果 如 图 10-4 所 示 。 

代码 分 析 : 在 示例 10-3 中 , 使 用 datalist 元 素 构 
造 了 一 个 选 值 列表 ，id 为 emaillist; input 元 素 通过 
把 list 特性 值 设 为 emaillist， 绑 定 了 该 选 值 列 表 ， 运 test2@test. com 
行 结果 如 图 10-4 所 示 。 


8，keygen 元 素 图 10-4 list 和 datalist 使 用 示例 


keygen 元 素 提 供 了 一 种 安全 的 方式 来 验证 用 户 。 该 元 素 有 密 钥 生成 的 功能 ， 当 提交 表 
单 时 ， 会 分 别 生 成 一 个 私人 密 钥 和 一 个 公共 密 钥 。 其 中 私人 密 钥 保存 在 客户 端 ， 公 共 密 钥 
则 通过 网 络 传输 至 服务 器 。 这 种 非 对 称 加 密 的 方式 , 为 网 页 的 数据 安全 提供 了 更 大 的 保障 。 
该 元 素 的 使 用 方法 如 示例 10-4 所 示 。 

【示例 10-4】 keygen 元 素 的 使 用 方法 。 


<form action=""> 
<input type="text" name="name" /><br> 
Encryption: 
<keygen name="security" /> <!-- 加 入 密 钥 安全 --> 
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<br><input type="submit" /> 
</form> 
keygen 元 素 提供 了 中 级 和 高 级 的 加 密 算法 ， 显 示 的 是 一 个 类 似 select 元 素 的 下 拉 框 ， 
可 以 选择 加 密 等 级 。 目 前 ，keygen 元 素 已 获得 多 数 主流 浏览 器 的 支持 。 
9. output 元 素 
output 元 素 用 于 不 同类 型 的 输出 ， 如 用 于 计算 结果 或 脚本 的 输出 等 。output 元 素 必须 
从 属于 某 个 表单 ， 即 写 在 表单 的 内 部 。 该 元 素 的 使 用 方法 如 下 : 
【示例 10-S】 output 元 素 的 使 用 方法 。 
<form oninput="x.value=volume.value"> 
<input type="range" name="volume" value="50" /> 


<output name="x"></output> 
</form> 


由 于 range 类 型 的 input 元 素 表现 为 一 个 滑 块 , 不 显示 数值 ， 因 此 这 时 使 用 output 元 素 
协助 显示 其 值 。 目 前 ，output 元 素 已 获得 多 数 主流 浏览 器 的 支持 。 


10.4 表单 验证 API 


HTML 5 为 表单 验证 提供 了 极 大 的 方便 ， 在 验证 表单 的 方式 上 显得 更 加 灵活 。 表 单 验 
证 ， 首 先 会 基于 前 面 讲解 的 表单 类 型 的 规则 进行 验证 ， 其 次 是 为 表单 元 素 提 供 了 一 些 用 于 
辅助 表单 验证 的 特性 ， 更 重要 的 是 ，HTML 5 还 提供 了 专门 用 于 表单 验证 的 属性 、 方 法 和 
事件 。 

10.4.1 与 验证 有 关 的 表单 元 素 特性 


HTML 5 提供 了 用 于 辅助 表单 验证 的 元 素 特性 。 利 用 这 些 特 性 ， 可 以 为 后 续 的 表单 自 
动 验证 提供 验证 依据 。 下 面 就 对 这 些 新 的 特性 进行 讲解 。 

1. required 特 性 

一 旦 为 某 个 表单 内 部 的 元 素 设 置 了 required 特性 ， 那 么 此 项 的 值 不 能 为 空 ， 否 则 无 法 
提交 表单 。 以 文本 输入 框 为 例 ， 只 需要 添加 required 特性 即 可 ， 使 用 方法 如 下 : 


<input name="name" type="text" placeholder="Full Name" required /> 


如 果 该 项 为 空 ， 则 无 法 提交 。zrequired 特性 可 用 于 大 多 数 输 入 或 选择 元 素 ， 隐 藏 的 元 
素 除外 。 


2. pattern 特 性 


pattem 特性 用 于 为 input 元 素 定义 一 个 验证 模式 。 该 特性 值 是 一 个 正则 表达 式 ， 提 交 
时 ， 会 检查 输入 的 内 容 是 否 符合 给 定 的 格式 ， 如 果 输 入 内 容 不 符合 格式 ， 则 不 能 提交 。 使 
用 方法 如 下 : 
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<input name="code" type="text" value="" pattern="[0-9] {6}" placeholder="6 


位 邮政 编码 ” /> 

使 用 pattem 特性 验证 表单 非常 灵活 。 例 如 ， 前 面 讲 到 的 email 类 型 的 input 元 素 ， 使 
用 pattern 特性 完全 可 以 实现 相同 的 验证 功能 (不 过 email 类 型 的 用 途 却 不 仅 限于 此 ) 。 

3. min、max 和 step 特 性 

min、max 和 step 特性 专门 用 于 指定 针对 数字 或 日 期 限制 ,min 特性 表示 允许 的 最 小 值 ; 
max 特性 表示 人 允许 的 最 大 值 ，step 特性 表示 合法 数据 的 间隔 步 长 。 使 用 方法 如 下 : 


<input type="range" name="volume" id="volume" min="0" max="1" step="0.2" 


> 

该 示例 中 ， 最 小 值 是 0， 最 大 值 是 1， 步 长 为 0.2， 合 法 的 取 值 有 0、0.2、0.4、0.6、 
0.8、1。 

4. novalidate 特 性 

novalidate 特性 用 于 指定 表单 或 表单 内 的 元 素 在 提交 时 不 验证 。 如 果 form 元 素 应 用 
novalidate 特性 ， 则 表单 中 的 所 有 元 素 在 提交 时 都 不 再 验证 。 使 用 方法 如 下 : 

<form action="demo form.asp" novalidate="novalidate"> 

<input type="email" name="user email" /> 


<input type="submit" /> 
</form> 


则 提交 时 ， 不 会 验证 表单 。 
10.4.2 ”表单 验证 的 属性 


表单 验证 的 属性 均 是 只 读 属 性 ， 用 于 获取 表单 验证 的 信息 。 

1. validity 属性 

该 属性 获取 表单 元 素 的 ValidityState 对 象 ， 该 对 象 包含 8 个 方面 的 验证 结果 。 
ValidityState 对 象 会 持续 存在 ， 每 次 获取 validity 属性 时 ， 返 回 的 是 同一 个 ValidityState 对 
象 。 以 一 个 这 特性 为 “usermame” 的 表单 元 素 为 例 ，validity 属性 的 使 用 方法 如 下 : 

var validityState=document .getElementById ("username") .validity; 

关于 ValidityState 对 象 将 在 下 一 节 讲 解 。 

2. willValidate 属 性 

该 属性 获取 一 个 布尔 值 ， 表 示 表 单元 素 是 否 需要 验证 。 如 果 表 单元 素 设置 了 required 
特性 或 pattern 特性 ， 则 willValidate 属性 的 值 为 tue， 即 表单 的 验证 将 会 执行 。 仍 然 以 一 
个 id 特 性 为 “usemame” 的 表单 元 素 为 例 ，willValidate 属性 的 使 用 方法 如 下 : 


var willValidate=document .getElementById ("username") .willValidate; 
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3. validationMessage 属 性 


该 属性 获取 当前 表单 元 素 的 错误 提示 信息 。 一 般 设 置 reuired 特性 的 表单 元 素 ， 其 
validationMessage 属性 值 一 般 为 “请 填写 此 字段 ”。 仍 然 以 一 个 id 特性 为 “usemame” 的 
表单 元 素 为 例 ，validationMessage 属性 的 使 用 方法 如 下 : 


var validationMessage=document .getElementById ("username") .validation 
Message; 


此 属性 为 只 读 属 性 , 不 能 直接 更 改 。 不 过 可 以 使 用 setCustomValidity0 方 法 (后 面 介绍 ) 
来 改变 该 值 。 


10.4.3 ValidityState 对 象 

ValidityState 对 象 是 通过 validity 属性 获取 的 ， 该 对 象 有 8 个 属性 ， 分 别针 对 8 个 方面 
的 错误 验证 ， 属 性 值 均 为 布尔 值 。 

1. valueMissing 属 性 

必 填 的 表单 元 素 的 值 为 空 。 


如 果 表 单元 素 设置 了 required 特性 ， 则 为 必 填 项 。 如 果 必 填 项 的 值 为 室 ， 就 无 法 通过 
表单 验证 ，valueMissing 属性 会 返回 true， 否则 返回 false。 


2. typeMismatch 属 性 


输入 值 与 type 类 型 不 匹配 。 
HTML 5 新 增 的 表单 类 型 如 email、number、url 等 ， 都 包含 一 个 原始 的 类 型 验证 。 如 
果 用 户 输入 的 内 容 与 表单 类 型 不 符合 ， 则 typeMismatch 属性 将 返回 tue， 和 否则 返回 false。 


3.， patternMismatch 属 性 


输入 值 与 pattern 特性 的 正则 不 匹配 。 
表单 元 素 可 通过 patterm 特性 设置 正则 表达 式 的 验证 模式 。 如 果 输 入 的 内 容 不 符合 验证 
模式 的 规则 ， 则 pattemMismatch 属性 将 返回 tue， 和 否则 返回 false。 


4. tooLong 属 性 
输入 的 内 容 超过 了 表单 元 素 的 maxLength 特性 限定 的 字符 长 度 。 
表单 元 素 可 使 用 maxLength 特性 设置 输入 内 容 的 最 大 长 度 。 虽 然 在 输入 的 时 候 会 限制 


表单 内 容 的 长 度 ， 但 在 某 种 情况 下 ， 如 通过 程序 设置 ， 还 是 会 超出 最 大 长 度 限 制 。 如 果 输 
入 的 内 容 超过 了 最 大 长 度 限 制 ， 则 tooLong 属性 返回 ttre， 否则 返回 false。 


5. rangeUnderflow 属 性 


输入 的 值 小 于 min 特性 的 值 。 
一 般 用 于 填写 数值 的 表单 元 素 ， 都 可 能 会 使 用 min 特性 设置 数值 范围 的 最 小 值 。 如 果 
输入 的 数值 小 于 最 小 值 ， 则 rangeUnderflow 属性 返回 tme， 否 则 返回 false。 
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6. rangeOverflow 属 性 


输入 的 值 大 于 max 特性 的 值 。 
般 用 于 填写 数值 的 表单 元 素 ， 也 可 能 会 使 用 max 特性 设置 数值 范围 的 最 大 值 。 如 果 
输入 的 数值 大 于 最 大 值 ， 则 rangeOverflow 属性 返回 tme， 否 则 返回 false。 


7. stepMismatch 属 性 


输入 的 值 不 符合 step 特性 所 推算 出 的 规则 。 

用 于 填写 数值 的 表单 元 素 ， 可 能 需要 同时 设置 min、max 和 step 特性 ， 这 就 限制 了 输 
入 的 值 必 须 是 最 小 值 与 step 特性 值 的 倍数 之 和 。 如 范围 从 0 到 10，step 特性 值 为 2， 因为 
合法 值 为 该 范围 内 的 偶数 ， 其 他 数值 均 无 法 通过 验证 。 如 果 输 入 值 不 符合 要 求 ， 则 
stepMismatch 属性 返回 tre， 否则 返回 false。 
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8.customError 属 性 


使 用 自 定义 的 验证 错误 提示 信息 。 

有 时 候 ， 不 太 适 合 使 用 浏览 器 内 置 的 验证 错误 提示 信息 ， 需 要 自己 定义 。 当 输入 值 不 
符合 语义 规则 时 ， 会 提示 自 定义 的 错误 提示 信息 。 

通常 使 用 setCustomValidity() 方 法 自 定 义 错误 提示 信息 : setCustomValidity(message) 会 
把 错误 提示 信息 自 定义 为 message, 此 时 customError 属性 值 为 tue; setCustomValidity(“”) 
会 清除 自 定 义 的 错误 信息 ， 此 时 customError 属性 值 为 false。 


10.4.4 ”表单 验证 的 方法 


HTML 5 为 我 们 提供 了 两 个 用 于 表单 验证 的 方法 。 
1. checkValidity() 方 法 


显 式 验 证 方法 。 每 个 表单 元 素 都 可 以 调用 checkValidity0 方 法 (包括 form) ， 它 返回 
一 个 布尔 值 ， 表 示 是 否 通过 验证 。 默 认 情况 下 ， 表 单 的 验证 发 生 在 表单 提交 时 ， 如 果 使 用 
checkValidity0 方 法 ， 可 以 在 需要 的 任何 地 方 验证 表单 。 一 旦 表单 元 素 没有 通过 验证 ， 则 会 
触发 invalid 事件 〈 该 事件 将 在 下 一 节 中 讲解 ) 。 

【示例 10-6】 显 式 验 证 表单 。 

下 面 的 示例 使 用 checkValidity0 方 法 显 式 验证 表单 。 

<!DOCTYPE html> 

<html> 


<head> 
<meta charset="utf-8"> 
<title> 使 用 checkValidity() 方 法 显 式 验证 表单 </title> 
<script type="text/javascript"> 
function CheckForm (frm) { 
if (frm.myEmail.checkValidity()){ /* 显 式 验证 邮件 */ 
alert ("邮件 格式 正确 ! ") ; 
}elsef{ 
alert ("邮件 格式 错误 ! ") ; 
} 
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| 
</script> 
</head> 
<body> 
<div> 
<form action="" method="post"> 
邮件 : 
<input type="email" name="myEmail" id="myEmail" value="yxw740@163.com" 
> 
<br /> 
<input type="submit" value=" 提 交 " onclick="return CheckForm(this.form)" 
WW 
</form> 
</div> 
</body> 
</html> 


代码 分 析 : 示例 10-6 中 ， 单 击 “ 提 交 ” 按 钮 时 ,会 先 调 用 CheckForm0) 函 数 进行 验证 ， 
再 使 用 浏览 器 内 置 的 验证 功能 进行 验证 。CheckForm() 函 数 包含 了 checkValidity0 方 法 的 显 
式 验 证 。 在 使 用 checkValidity0 进 行 显 式 的 验证 时 , 还 会 触发 所 有 的 结果 事件 和 UI 触发 器 ， 
2. setCustomValidity() 方 法 


自 定义 错误 提示 信息 的 方法 。 
当 默 认 的 提示 错误 满足 不 了 需求 时 ， 可 以 通过 该 方法 自 定义 错误 提示 。 当 通过 此 方法 
自 定义 错误 提示 信息 时 ， 元 素 的 validationMessage 属性 值 会 更 改 为 定义 的 错误 提示 信息 ， 
同时 ValidityState 对 象 的 customError 属性 值 变 成 rue。 下 面 通过 示例 了 解 其 使 用 方法 。 
【示例 10-7】 自 定义 错误 提示 信息 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 自 定义 错误 提示 信息 </title> 
<script type="text/javascript"> 
function CheckForm(frm){ 
var name=frm.name; 
if (name .value==""){ 
name .setCustomValidity ("请 填写 您 的 姓名 ! ") ;  /* 自 定 义 错误 提示 */ 
}elsef{ 
name . setCustomValidity("") /* 取消 自 定义 错误 提示 */ 


} 
} 
</script> 
</head> 
<body> 
<div> 
<form action="" method="post"> 
姓名 : 
<input id="name" name="name" placeholder="First and Last Name" required 
2 
<input type="submit" value=" 提 交 " onClick="CheckForm(this.form)" /> 
</form> 
</div> 
</body> 
</html> 
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代码 分 析 : 在 示例 10-7 中 ， 在 提交 表单 时 ， 如 果 姓 名 为 空 ， 则 自 定义 一 个 提示 信息 ; 
如 果 姓 名 不 为 空 ， 则 取消 自 定义 错误 信息 。 


10.4.5 ”表单 验证 的 事件 


HTML 5 为 我 们 提供 了 一 个 表单 验证 的 事件 。 下 面 介绍 invalid 事件 。 

表单 元 素 为 通过 验证 时 触发 。 无 论 是 提交 表单 还 是 直接 调用 checkValidity 方法 ， 只 要 
有 表单 元 素 没有 通过 验证 ， 就 会 触发 invalid 事件 。invalid 事件 本 身 不 处 理 任何 事情 ， 我 们 
可 以 监听 该 事件 ， 自 定义 事件 处 理 。 

【示例 10-8】 监听 invalid 事件 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 监 听 invalid 事件 </title> 
<script type="text/javascript"> 
function invalidHandler (evt){ 
// 获 取 当 前 被 验证 的 对 象 
var Validity = evt.srcElement.validity; 
// 检 测 ValidityState 对 象 的 valueMissing 属性 
if(validity.valueMissing){ 
alert ("姓名 是 必 填 项 ， 不 能 为 空 ") 


上 

// 如 果 不 希 望 看 到 浏览 器 默认 的 错误 提示 方式 ， 可 以 使 用 下 面 的 方式 取消 

evt .PreventDefault () 7 
} 
window.onload=function(){ 

Var name=document .getElementById ("name"); 

// 注 册 监 听 invalid 事件 

name .addEventListener ("invalid",invalidHandler, false); 
} 
</script> 
</head> 
<body> 
<div> 

<form action="" method="post"> 

姓名 : 

<input id="name" name="name" placeholder="First and Last Name" required 
/> 

<input type="submit" value=" 提 交 " /> 

</form> 

</div> 
</body> 
</html> 


代码 分 析 : 在 示例 10-8 中 ， 页 面 初始 化 时 ， 为 姓名 输入 框 添加 了 一 个 监听 的 invalid 
事件 。 当 表单 验证 没 通过 时 ， 会 触发 mvalid 事件 ，invalid 事件 会 调用 注册 到 事件 里 的 函数 
invalidqHandler()。 这 样 就 可 以 在 自 定义 的 函数 invalidHandler0 中 做 任何 事情 了 。 

一 般 情况 下 ， 在 invalid 事件 处 理 完 成 后 ， 还 是 会 触发 浏览 器 默认 的 错误 提示 。 必 要 的 
时 候 ， 可 以 屏蔽 浏览 器 后 续 的 错误 提示 ， 可 以 使 用 事件 的 preventDefault( 方 法 ， 阻 止 浏览 
器 的 默认 行为 ， 并 自行 处 理 错误 提示 信息 。 
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通过 使 用 invalid 事件 使 得 表单 开发 更 加 灵活 。 如 果 需 要 取消 验证 ,可 以 使 用 前 面 讲 过 


的 novalidate 特性 。 
10.5 ”实验 室 : 用 户 注 册页 面 
本 节 将 使 用 本 章 所 讲述 的 HIML 5 表单 技术 ， 设 计 一 个 简单 的 用 户 注 册页 面 。 由 于 


HTML 5 的 表单 不 但 增加 了 很 多 特性 ， 而 且 表 单 的 验证 方式 也 有 很 大 的 转变 ， 因 此 本 节 介 
绍 的 案例 的 实现 ， 也 将 突破 传统 的 思维 方式 。 


1.， 案例 简介 


本 节 介绍 的 案例 是 一 个 用 户 注册 页 面 ， 页 面 内 容 包括 : 姓名 、 年 龄 、 邮 箱 、 微 博 地 址 、 
毕业 时 间 、 考 试 成 绩 、 所 在 国家 等 。 使 用 HTML 5 表单 技术 实现 该 注册 页 面 与 传统 的 实现 
方式 相 比 有 非常 大 的 差异 ， 主 要 表现 在 以 下 几 个 方面 。 


口 
口 


部 分 表单 元 素 提供 了 描述 性 的 信息 ， 输 入 框 获取 焦点 时 ， 提 示 信 息 会 消失 。 
使 用 了 HTML 5 新 增 的 表单 类 型 ， 其 中 年 龄 表现 为 滑 块 ， 邮 件 和 微 博 会 自 带 验证 


格式 ， 毕 业 时 间 与 考试 成 绩 的 表单 元 素 是 可 以 微调 的 。 


OOo 


国家 的 选择 会 有 提供 的 下 拉 提 示 ， 是 使 用 list 特性 和 datalist 元 素 完 成 的 。 
年 龄 的 滑 块 型 的 表单 元 素 不 显示 数值 ， 使 用 output 元 素 协助 其 显示 。 
表单 的 验证 完全 突破 了 传统 的 验证 方式 。 

自 户 注 册页 面 的 效果 如 图 10-5 所 示 ， 下 面 逐 步 实现 它 。 


“4 [ER 


一 -一 


年 龄 20 
| 
re 


Fn EE 


成 绩 


图 10-5 HTML 5 实现 的 用 户 注册 页 面 


2. 页 面 基本 元 素 
页 面 内 容 包括 : 姓名 、 年 龄 、 邮 箱 、 微 博 、 毕 业 时 间 、 考 试 成 绩 、 国 家 等 ， 其 中 年 龄 、 
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邮箱 、 微 博 、 毕 业 时 间 、 考 试 成 绩 使 用 了 新 型 的 表单 类 型 ， 各 种 新 型 的 表单 都 包含 自身 的 
验证 信息 。 页 面 元 素 信 息 如 示例 10-9 所 示 。 另 外 , 这 里 为 每 一 个 表单 元 素 增加 了 title 特性 ， 
其 值 为 表单 的 文字 名 称 ， 将 用 于 后 续 的 表单 验证 提示 。 

【示例 10-9】 用 户 注 册页 面 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
… / * 样式 表 省 略 */ 
</style> 
</head> 
<body> 
<form id="register" name="register"> 
<label for="firstName"><span> 姓 名 </span> 
<input name="firstName" type="text" title=" 姓 名 " placeholder=" 请 输入 您 
的 姓名 " required /> 
</label> 
<label for="age"><span> 年 龄 </span> 
<input id="age" name="age" type="range" min="0" max="99" step="1" value="20" 
onchange="displayAage.value=this.value" /> 
<output name="displayAage">20</output> 
</label> 
<label for="emailaddress"><span> 邮 箱 </span> 
<input type="email" name="emailaddress" title=" 邮 箱 "” placeholder=" 请 输 
入 您 的 邮箱 " required /> 
</label> 
<label for="weibo"><span> 微 博 </span> 
<input type="url" name="weibo" title=" 微 博 " placeholder=" 请 输入 您 的 微 博 
地 址 " required /> 
</label> 
<label for="graduation"><span> 毕 业 时 间 </span> 
<input name="graduation" type="date" title=" 毕 业 时 间 "” placeholder=" 请 输 
入 您 的 毕业 时 间 " /> 
</label> 
<label] for="score"><span> 考 试 成 绩 </span> 
<input name="score" type="number" title=" 考 试 成 绩 " placeholder=" 请 输入 您 
的 考试 成 绩 " min="0" max="10" step="0.2" /> 
</label> 
<label for="country"><span> 国 家 </span> 
<input name="country" type="text" title=" 国 家 " list="countries" /> 
</label> 
<datalist id="countries"> 
<option value="Australia">Australia</option> 
<option value="Germany">Germany</option> 
<option value="United Kingdom">United Kingdom</option> 
<option value="United States">United States </option> 
</datalist> 
<input type="submit" name="submit"™" value=" 提 交 " onclick="clearError()" /> 
<div id="error"></div> 
</form> 
</body> 
</html> 
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3. 实现 表单 验证 


表单 验证 将 突破 传统 方式 。 如 示例 10-9 所 示 ， 表 单 提 交 时 ， 没 有 专门 的 表单 验证 处 理 
函数 。HTML 5 的 表单 验证 会 在 提交 表单 之 前 做 好 准备 工作 ， 如 示例 中 的 可 用 与 验证 的 表 
单 类 型 和 表单 特性 等 。 下 面 是 其 他 准备 工作 。 
在 页 面 加 载 完成 后 ， 将 执行 下 面 的 JavaScript 脚本 ， 主 要 做 两 件 事情 : 一 件 是 注册 表 
单 的 invalid 事件 ， 当 表单 验证 时 ， 如 果 捕获 到 错误 会 立即 触发 ， 另 一 件 是 为 年 龄 项 自 定义 
提示 信息 。 

<script type="text/javascript"> 

window.onload=function (){ 

Var register=document .getElementById ("register"); 


// 注 册 监 听 表 单 中 的 invalid 事件 ， 捕 获 到 错误 即 处 理 
register.addEventListener ("invalid",invalidHandler,true); 


// 为 年 龄 项 添加 自 定义 错误 提示 信息 
document .getElementById("age") .setCustomValidity ("年 龄 不 能 通过 验证 ! "); 


E 
</script> 


4. 其 他 处 理 函 数 


函数 addError0 和 clearError0 是 处 理 提示 信息 的 ， 分 别 表示 添加 提示 和 清除 提示 。 

函数 invalidHandlerO 是 用 于 处 理 invalid 事件 的 。 当 表单 验证 有 错误 时 ， 会 立即 触发 
invalid 事件 ， 并 执行 函数 invalidHandler0， 该 函数 为 了 获得 更 加 准确 的 错误 信息 ， 对 
ValidityState 对 象 的 各 个 属性 分 别 进行 了 判断 ， 并 且 屏 蔽 了 系统 的 验证 提示 。 


<script type="text/javascript"> 
function addError (err){ 
document .getElementById("error") .innerHTML += "* "+terrt"<br />"; 
} 
function clearError(){ 
document .getElementById ("error") .innerHTML = ""; 
} 
function invalidHandler (evt){ 
// 获 取出 错 元 素 的 Validitystate 对 象 
Var validity = evt.srcElement.validity; 
var str=""; 
// 如 果 有 自 定义 的 提示 信息 ， 则 使 用 它 来 提示 
if(validity.customError){ 
str = evt.srcElement .validationMessage; 
J}else{ 
// 以 下 是 检测 的 Validitystate 对 象 的 各 个 属性 ， 以 判断 具体 错误 
if(validity.valueMissing){ 
str+=" 不 能 为 空 ; "; 


上 

if(validity.typeMismatch){ 
str+=" 与 类 型 不 匹配 ;，"; 

} 

if(validity.patternMismatch){ 
str+=" 与 pattern 正则 不 匹配 ; "; 

} 

if(validity.tooLong){ 
str+=" 字 符 过 长 ;"; 
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} 
if(validity.rangeUnderflow){ 
str+=" 不 能 小 于 最 小 值 ;"; 


h 

if(validity.rangeOverflow){ 
str+=" 不 能 大 于 最 大 值 ; "; 

} 

if(validity.stepMismatch){ 
str+=" 不 符合 step 特性 所 推算 出 的 规则 ; " ; 


} 
// 使 用 表单 元 素 的 title 特性 值 来 组 合 提示 信息 
str = evt.srcElement.title + str; 

} 

// 添 加 错误 提示 

addError (str); 

// 阻 止 事 件 冒 泡 


evt.stopPropagation(); 
// 取 消 后 续 的 浏览 器 默认 的 处 理 方式 
evt .preventDefault (); 


. 
</script> 


至 此 ， 用 户 注册 页 面 已 经 完成 。 此 时 ， 若 单 击 “ 提 交 ” 按 钮 ， 表 单 仍然 会 自动 验证 。 
如 果 出 现 错 误 ， 会 优先 使 用 invalid 事件 的 invalidHandler0 函 数 来 做 后 续 的 错误 处 理 。 


10.6 小 结 


本 章 主要 讲解 了 HIML 5 的 表单 技术 。 重 点 讲解 了 新 增 的 表单 类 型 、 新 增 的 表单 特性 
及 元 素 和 表单 验证 API， 其 中 分 别 对 表单 验证 API 的 属性 、 方法 和 事件 进行 了 重点 的 讲解 ， 
对 涉及 的 ValidityState 对 象 也 做 了 逐一 的 剖析 。 本章 的 难点 在 于 表单 验证 方式 的 思维 转变 ， 
需要 对 表单 验证 的 整个 过 程 有 非常 充分 的 理解 。 下 一 章 将 介绍 HIML 5 的 拖 放 功能 。 


10.7 习 题 


【习题 1】HTML 5 大 幅度 地 改进 了 input 元 素 的 类 型 , 以 下 哪些 类 型 是 新 增 的 (多 选 ): 


A. url 类 型 B. email 类 型 C. range 类 型 

D. number 类 型 E. tel 类 型 F. file 类 型 

【习题 2】HTML 5 增加 了 很 多 新 的 表单 特性 及 元 素 ， 请 选择 哪些 是 新 增 的 元 素 (多 选 ) : 
A. required B. placeholder C. autocomplete 

D. datalist E. keygen F. output 


【习题 3】ValidityState 对 象 有 8 个 属性 ， 分 别针 对 8 个 方面 的 错误 验证 。 请 列 出 这 8 
个 属性 并 附加 简要 的 说 明 。 
【习题 4】 请 设计 一 个 用 户 注册 的 表单 ， 并 使 用 ValidityState 对 象 来 验证 表单 。 
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在 Web 应 用 中 ,良好 的 用 户 体验 是 设计 师 们 一 直 的 追求 , 其 中 的 拖 放 体验 就 是 其 中 之 
一 。 在 HIML 5 之 前 ， 已 经 可 以 使 用 事件 mousedown、mousemove 和 mouseup 巧妙 地 实现 
页 面 内 的 拖 放 操作 , 但 是 拖 放 的 操作 范围 只 是 局 限 在 浏览 器 内 部 .HTML 5 提供 的 拖 放 APT， 
不 但 能 直接 实现 拖 放 操作 ， 而 且 拖 放 的 范围 已 经 超出 浏览 器 的 边界 ，HTML 5 提供 的 文件 
API， 支 持 拖 放 多 个 文件 并 上 传 。 这 一 革命 性 的 支持 ， 为 移动 互联 网 应 用 进一步 铺 平 了 道 
路 。 本 章 就 深入 探讨 拖 放 API 和 文件 API。 


11.1 拖 放 API 


HTML 5 的 拖 放 API 基本 包括 三 个 方面 : 首先 是 为 页 面 元 素 提供 了 拖 放 特性 ;其 次 是 
为 鼠标 事件 增加 了 拖 放 事件 ， 最 重要 的 是 提供 了 用 于 存储 拖 放 数据 的 DataTransfer 对 象 。 
下 面 分 三 个 方面 进行 讲解 。 


11.1.1 新 增 的 draggable 特性 


draggable 特性 用 于 定义 元 素 是 否 允 许 用 户 拖 放 ， 该 特性 有 三 个 可 选 值 ，true、false 和 
auto。 通 常 大 部 分 的 页 面 元 素 是 不 可 拖 放 的 ， 如 果 要 把 元 素 变 成 可 以 拖 放 的 ， 则 可 以 设置 
draggable 特性 如 下 : 


<div draggable="true"> </div> 

另外 ，img 元 素 和 a 元 素 〈 需 指定 href) 默认 是 可 以 拖 放 的 。 
11.1.2 ”新 增 的 鼠标 拖 放 事件 

为 了 使 拖 放 控 制 更 加 具体 ，HTML 5 提供 了 7 个 与 拖 放 相 关 的 鼠标 响应 事件 ， 而 这 7 
个 事件 会 响应 在 不 同 的 元 素 上 。 下 面 我 们 按照 响应 的 时 间 先 后 顺序 逐个 介绍 。 

1. dragstart 事 件 

开始 拖 放 时 触发 的 事件 ， 事 件 的 作用 对 象 是 被 拖 放 的 元 素 。 

2. drag 事 件 

拖 放 过 程 中 触发 的 事件 ， 事 件 的 作用 对 象 是 被 拖 放 的 元 素 。 
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3. dragenter 事 件 
有 拖 放 的 元 素 进 入 本 元 素 的 范围 内 时 触发 ， 事 件 的 作用 对 象 是 拖 放 过 程 中 鼠标 经 过 的 
元 素 。 
4. dragover 事 件 
有 拖 放 的 元 素 正 在 本 元 素 的 范围 内 移动 时 触发 ， 事 件 的 作用 对 象 是 拖 放 过 程 中 鼠标 经 
过 的 元 素 。 
5. dragleave 事 件 
有 拖 放 的 元 素 离开 本 元 素 的 范围 时 触发 ， 事 件 的 作用 对 象 是 拖 放 过 程 中 鼠标 经 过 的 元 素 。 
6. drop 事 件 
有 拖 放 的 元 素 被 拖 放 到 本 元 素 中 时 触发 ， 事 件 的 作用 对 象 是 拖 放 的 目标 元 素 。 
7. dragend 事 件 
拖 放 操作 结束 时 触发 ， 事 件 的 作用 对 象 是 被 拖 放 的 元 素 。 
在 拖 放 过 程 中 ， 我 们 就 可 以 触发 这 7 个 拖 放 事件 ， 来 实现 页 面 的 灵活 控制 。 
11.1.3 DataTransfer 对 象 


HTML 5 提供 了 DataTransfer 对 象 ， 用 以 支持 拖 放 数据 的 存储 。 使 用 拖 放 的 目的 ， 就 
是 希望 在 拖 放 的 过 程 中 , 有 数据 交换 , 而 DataTransfer 对 象 就 充当 了 这 种 媒介 。 DataTransfer 
对 象 有 其 自身 的 属性 和 方法 ， 可 以 完成 对 拖 放 的 数据 的 各 种 处 理 。 


1. dropEffect 属 性 


设置 或 获取 拖 放 操作 的 类 型 和 要 显示 的 光标 类 型 。 如 果 该 操作 效果 与 起 初 设 置 的 
effectAllowed 效果 不 符 ， 则 拖 放 操作 失败 。 可 以 修改 设置 ， 包 含 这 几 个 值 : none、copy、 
link 和 move。 


2. effectAllowed 属 性 


设置 或 获取 数据 传送 操作 可 应 用 于 该 对 象 的 源 元 素 。 可 以 指定 值 为 none、copy、 
copyLink、 copyMove、 link、 linkMove、 move、all 和 uninitialized。 


3. types 属 性 


获取 在 dragstart 事件 触发 时 为 元 素 存储 数据 的 格式 ， 如 果 是 外 部 文件 的 拖 放 ， 则 返回 
Files。 


4. files 属 性 
获取 存储 在 DataTransfer 对 象 中 的 正在 拖 放 的 文件 列表 FileList， 可 以 使 用 数组 的 方式 


i 
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5. clearData() 方 法 


清除 DataTransfer 对 象 中 存放 的 数据 。 语 法 如 下 : 


clearData([sDataFormat]) 


参数 说 明 : 
[sDataFormat] 为 可 选 参数 。 参 数 可 取 值 为 : Text、URL、File、HTML、Image， 即 可 
删除 指定 格式 的 数据 。 如 果 该 参数 省 略 ， 则 清除 全 部 数据 。 


6. setDatal() 方 法 
向 内 存 中 的 DataTransfer 对 象 添加 指定 格式 的 数据 。 语 法 如 下 : 
setData([sDataFormat], [datal]) 


参数 说 明 : [sDataFormat] 为 数据 参数 类 型 ， 可 取 值 为 : Text、URL。[data] 数 据 为 字符 
串 或 url 地址 。 


7. getData() 方 法 

从 内 存 中 的 DataTransfer 对 象 中 获取 数据 。 语 法 如 下 : 
getData([sDataFormat]) 

参数 说 明 : [sDataFormat] 为 数据 参数 类 型 ， 可 取 值 为 : Text、URL。 
8. setDraglmage() 方 法 

设置 拖 放 时 ， 跟 随 鼠 标 移动 的 图 片 。 语 法 如 下 

setDragImage ([imgElement], [x], [y]) 


参数 说 明 : [imgElement]， 表示 图 片 对 象 ，[x]、[y]: 分 别 表示 相对 于 鼠标 位 置 的 横 坐 
标 和 纵 坐 标 。 


9. addElement() 方 法 


添加 一 起 跟随 拖 放 的 元 素 ， 如 果 你 想 让 某 个 元 素 跟随 被 拖 放 元 素 一 同 被 拖 放 ， 则 使 用 
此 方法 。 语 法 如 下 : 


addElement ([element]) 


参数 [element] 表 示 一 起 跟随 拖 放 的 元 素 对 象 。 
11.1.4 ”实验 室 ; 拖 放 元 素 的 内 容 


下 面 使 用 前 面 学 习 的 拖 放 API， 来 实现 拖 放 页 面 中 元 素 的 内 容 ， 即 把 一 个 页 面 元 素 里 
的 内 容 通 过 拖 放 的 方式 ， 在 另 一 个 元 素 内 产生 一 个 复制 ， 实 现 效 果 如 图 11-1 所 示 。 
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图 11-1 拖 放 页 面 元 素 的 内 容 


下 面 分 4 个 步骤 来 介绍 拖 放 的 实现 。 
1. 设计 页 面 元 素 


在 页 面 中 添加 两 个 元 素 ， 分 别 作为 拖 放 的 源 元 素 和 目标 元 素 ， 并 设置 样式 表 。 其 中 ， 
源 元 素 内 部 包含 文字 和 图 片 内 容 , 目标 元 素 的 内 容 为 空 ; 源 元 素 设 置 draggable 特 性 值 为 true 
(draggable="true") ， 表 示 源 元 素 是 可 以 被 拖 放 的 。 页 面 设置 如 下 所 示 。 

【示例 11-1】 拖 放 页 面 元 素 的 内 容 。 

<!DOCTYPE html> 

<html> 


<head> 

<meta charset="utf-8"> 
<title> 拖 放 页 面 的 内 容 </title> 
<style type="text/css"> 

… / * 样式 表 省 略 */ 

</style> 

</head> 

<body> 

<!-- 源 元 素 dragSource --> 
<div id="dragSource"” draggable="true"> 拖 这 里 <img src="images/icon6.png" 
width="75" height="72"></div> 
<!-- 目标 元 素 dropTarget --> 
<div id="dropTarget"></div> 
</body> 

</html> 


2. 添加 ondragstart 监 听 事 件 


给 拖 放 的 源 元 素 添加 ondragstart 监听 事件 ， 事 件 触发 时 ， 把 源 元 素 里 的 内 容 追 加 至 
dataTransfer 对 象 中 。 最 后 把 添加 监听 事件 的 处 理 函 数 DragStart0 追 加 至 window.onload 事 
件 中 。 
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<script type="text/javascript"> 
function DragStart (){ 
Var source = document .getElementById('dragSource'); /* 拖 放 源 元 素 */ 


/* 监听 dragstart 事件 : 作用 在 源 元 素 上 */ 
source.addEventListener('dragstart', function(e) { 
e.dataTransfer.setData('text/plain', e.target.innerHTML); 
/* 向 dataTransfer 对 象 中 追加 数据 */ 
e.dataTransfer.effectAllowed="copy"; 
} ,false); 
下 
/* 添加 函数 DragStart 值 window .onload 监听 事件 */ 
window.addEventListener('load', Dragstart,false); 
</script> 


3. 添加 dragover 监 听 事 件 


给 拖 放 的 目标 元 素 添 加 dragover 监听 事件 ， 事 件 触发 时 ， 改 变 目标 元 素 的 样式 ， 并 屏 
蔽 了 浏览 器 的 默认 处 理事 件 。 最 后 把 添加 监听 事件 的 处 理 函 数 DragOver0)， 追 加 至 
window.onload 事件 中 。 
目标 元 素 的 preventDefault() 方 法 可 以 取消 浏览 器 的 默认 处 理 ， 和 否则， 无 法 实现 拖 放 。 
<script type="text/javascript"> 
function DragOver(){ 
var target = document.getElementById('dropTarget');  /* 拖 放 日 标 元 素 */ 
/* 监听 dragover 事件 作用 在 目标 元 素 上 */ 


target .addEventListener('dragover', function(e) { 


this.className="dragover"; /* 鼠标 拖 放 经 过 时 的 样式 */ 
e.preventDefault (); /* 取消 浏览 器 默认 处 理 */ 
} ,false) 


/* 添加 函数 DragStart 值 window.onload 监听 事件 */ 
window.addEventListener('load', DragOver, false); 
</script> 


4. 添加 ondrop 监 听 事 件 


给 拖 放 的 目标 元 素 添加 ondrop 监听 事件 ， 事 件 触发 时 ， 获 取 dataTransfer 对 象 中 的 数 
据 ， 并 追加 到 目标 元 素 中 ， 同 时 还 原 了 样式 。 最 后 把 添加 监听 事件 的 处 理 函 数 Drop 0)， 追 
加 至 window.onload 事件 中 。 


<script type="text/javascript"> 
function Drop(){ 
var target = document.getElementById('dropTarget'); /* 拖 放 目 标 元 素 */ 
/* 监听 drop 事件 : 作用 在 目标 元 素 上 */ 
target.addEventListener ('drop'，function(e) { 
va data=e.dataTransfer.getData('text/plain'); 
/* 取得 dataTransfer 对 象 中 的 数据 */ 
this .innerHTML += data; 
e.dataTransfer .dropEffect="copy"; 
this.className=""; /* 还 原样 式 */ 
},false); 
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/* 添加 函数 DragStart 值 window .onload 监听 事件 */ 
window.addEventListener('load', Drop,false); 
</script> 


至 此 ， 拖 放 页 面 元 素 的 内 容 已 经 实现 了 。 此 时 ， 可 以 把 源 元 素 中 的 内 容 拖 放 至 目标 元 


11.2 文件 API 


HTML 5 提供 了 一 个 关于 文件 操作 的 文件 API， 我 们 可 以 通过 编程 的 方式 选择 和 访问 
文件 数据 , 使 得 从 Web 网 页 上 访问 本 地 文件 系统 变 得 十 分 简单 ,文件 API 主要 涉及 FileList 
对 象 、File 对 象 、Blob 接口 和 FileReader 接口 。 


11.2.1 新 增 的 标签 特性 


HTML 5 仍然 沿用 传统 的 文件 上 传 方式 , 借助 fle 类 型 的 表单 元 素来 实现 文件 的 上 传 。 
与 之 前 不 同 的 是 ，HTML 5 为 file 类 型 的 表单 元 素 新 增 了 multiple 特性 和 accept 特性 。 

1. multiple 特 性 

multiple 特性 可 允许 同时 选择 多 个 上 传 文件 。 在 HTML 5 之 前 ，file 类 型 的 表单 元 素 只 
允许 选择 一 个 上 传 文件 。 而 在 HTML 5 中 ， 可 借助 multiple 特性 同时 选择 多 个 上 传 文件 。 
multiple 特性 的 使 用 方法 如 下 : 

<input type="file" multiple /> 

同时 选择 多 个 上 传 文件 ， 得 到 的 是 一 个 FileList 对 象 ， 该 对 象 是 一 个 File 对 象 的 列表 。 
关于 这 两 个 对 象 会 在 下 一 节 讲 述 。 

2. accept 特 性 

accept 特性 规定 了 可 通过 文件 上 传 提交 的 文件 类 型 。HTML 5 规范 试图 使 用 accept 特 
性 限制 文件 上 传 只 能 接受 指定 的 文件 类 型 ， 但 目前 各 个 主流 浏览 器 并 没有 做 这 样 的 限制 ， 
仅 实 现 了 在 打开 文件 窗口 时 ， 默 认 选 择 指 定 的 文件 类 型 。accept 特性 使 用 方法 如 下 : 

<input type="file" accept="image/gif" /> 

这 行 代 码 说 明了 只 接受 gif 格式 的 图 片 ,实际 中 在 选择 上 传 文件 时 ， 默认 仅 显 示 gif 格 
式 的 文件 。 当 然 也 可 以 选择 其 他 类 型 的 文件 进行 上 传 ， 没 有 实际 的 限制 。 


11.2.2 ”FileList 对 象 与 File 对 象 
当 用 户 在 file 类 型 的 表单 元 素 中 同时 选择 多 个 文件 时 ， 可 通过 编程 的 方式 获得 一 个 文 


件 列表 ， 即 FileList 对 象 。FileList 对 象 里 的 每 一 个 文件 又 是 一 个 File 对 象 。 
FileList 对 象 是 File 对 象 的 一 个 集合 ， 可 使 用 数组 的 方式 遍历 FileList 对 象 里 的 每 一 个 
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File 对 象 。 下 面 通过 一 个 示例 进一步 了 解 这 两 个 对 象 之 间 的 关系 。 
【示例 11-2】 遍历 FileList 对 象 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<tit1le> 饥 历 FileList 对 象 </title> 
<script type="text/javascript"> 
function ShowFiles(){ 
var fileList=document.getElementById("files") .files; 
/* 获取 FileList 对 象 */ 
Var msg=document .getElementById ("msg"); 
var file; 
for(var i=0;i<fileList.length;i++){ 
file=fileList[i]; /* 获取 单个 File 对 象 */ 
msg.innerHTML+=file.name+";<br />"; 
中 
</script> 
</head> 
<body> 
<form action="" method="post"> 
<input type="file" id="files" multiple /> <!-- 可 选择 多 个 文件 --> 
<input type="button" value=" 显 示 文 件 " onclick="ShowFiles()" /> 
<p id="msg"></p> 
</form> 
</body> 
</html> 


代码 分 析 : 在 示例 11-2 中 ,设置 file 类 型 的 表单 元 素 的 特性 multiple， 可 选择 多 文件 ， 
可 获取 FileList 对 象 。 单 击 “ 显 示 文 件 ” 按 钮 ， 会 执行 函数 ShowFiles0， 并 把 FileList 对 象 
内 的 所 有 File 对 象 名 称 显 示 出 来 。 


11.2.3 Blob 对 象 

Blob 接口 代表 原始 二 进 制 数据 ,通过 Blob 对 象 的 slice0 方 法 , 可 以 访问 里 面 的 字 节 数 
据 。Blob 接口 还 有 两 个 属性 : size 和 type。 

1. size 属 性 


表示 Blob 对 象 的 字 节 长 度 。Blob 对 象 的 二 进 制 数据 可 借助 FileReader 接口 读 取 。 如 
果 Blob 对 象 没有 字 节 数 ， 则 size 属性 为 0。 

2. type 属 性 

表示 Blob 对 象 的 MIME 类 型 ， 如 果 是 未 知 类 型 ， 则 返回 一 个 空 字符 串 。 使 用 type 属 
性 获取 文件 的 MIME 类 型 ， 可 以 更 加 精确 地 确定 文件 的 类 型 ， 可 避免 因 更 改 文 件 的 扩展 名 
而 造成 文件 类 型 的 误 判 。 
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3. slice() 方 法 

使 用 slice() 方 法 可 以 实现 文件 的 切割 ， 并 返回 一 个 新 的 Blob 对 象 。 

4. File 对 象 与 Blob 对 象 

File 对 象 继承 了 Blob 对 象 ， 所 以 File 对 象 也 可 以 使 用 Blob 对 象 的 属性 和 方法 。 
5. 示例 介绍 


File 对 象 可 以 像 Blob 对 象 一 样 去 使 用 size 属性 和 type 属性 。 下 面 的 示例 就 使 用 这 两 
个 属性 获取 上 传 文件 的 基本 数据 信息 。 
【示例 11-3】 获取 文件 的 大 小 和 类 型 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 获 取 文 件 的 大 小 和 类 型 </title> 
<script type="text/javascript"> 
function ShowType(){ 
var files=document.getElementById("files") .files;/* 获取 FileList 对 
象 */ 
var msg=document .getElementById ("msg"); 
var file; 
for (var i=0;i<files.length;i++){ 
file=fileList[i]; /* 获取 单个 File 对 象 */ 
msg.innerHTML+=" 字 节 长 度 : "+file.sizet";<br />"; 
msg .innerHTML+=" 文 件 类 型 : "+file.type+";<br />"; 
上 
}</script> 
</head> 
<body> 
<form action="" method="post"> 
<input type="file" id="files" multiple accept="image/*" /> 
<input type="button" value=" 显 示 文件 数据 " onclick="ShowType()" /> 
<p id="msg"></p> 
</form> 
</body> 
</html> 


代码 分 析 : 在 示例 11-3 中 ,遍历 每 一 个 上 传 的 File 对 象 ， 并 输出 每 个 File 对 象 的 文件 
大 小 〈size 属性 ) 和 文件 类 型 (type 属性 ) 。 当 然 ， 还 可 以 根据 获取 的 文件 大 小 和 文件 类 
型 ， 做 一 些 判 断 或 限制 。 


11.2.4 ”FileReader 接口 


FileReader 接口 提供 了 一 些 读 取 文件 的 方法 与 一 个 包含 读 取 结果 的 事件 模型 。 作 为 File 
API 的 一 部 分 ，FileReader 接口 主要 是 把 文件 读 入 内 存 ， 并 读 取 文件 中 的 数据 。 

由 于 部 分 早期 版 本 的 浏览 器 没有 实现 FileReader 接口 ， 因 此 在 使 用 FileReader 接口 之 
前 ， 有 必要 检测 一 下 浏览 器 支持 的 情况 。 检 测 方法 如 下 : 
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if(typeof FileReader == "undefined"){ 
alert ("浏览 器 未 实现 FileReader 接口 "); 
}elsef{f 
Var reader = new FileReader (); 


1. 接口 的 属性 
FileReader 接口 拥有 三 个 属性 ， 分 别 用 于 返回 读 取 文件 的 状态 、 数 据 和 读 取 时 发 生 的 


背 误 。 
口 readyState 属性 (只 读 ) 
获取 读 取 文件 的 状态 。 该 状态 有 如 下 3 个 值 。 
> EMPTY ( 值 为 0) : 表示 新 的 FileReader 接口 已 经 构建 ， 且 没有 调用 任何 读 取 
方法 时 的 默认 状态 。 
> LOADING ( 值 为 1) : 表示 有 读 取 文件 的 方法 正在 读 取 File 对 象 或 Blob 对 象 ， 
且 没 有 错误 发 生 。 
> DONE ( 值 为 2) : 表示 读 取 文件 结束 。 可 能 整个 File 对 象 或 Blob 对 象 已 经 完 
全 读 入 内 存 中 ， 或 者 在 文件 读 取 的 过 程 中 出 现 错误 ， 或 者 读 取 过 程 中 使 用 了 
abort() 方 法 强行 中 断 。 
口 result 属性 (只 读 ) 
获取 已 经 读 取 的 文件 数据 。 如 果 是 图 片 ， 将 返回 base64 格式 的 图 片 数 据 。 
口 error 属性 (只 读 ) 
获取 读 取 文件 过 程 中 出 现 的 错误 。 该 错误 包含 如 下 4 种 类 型 。 
> NotFoundError: 找 不 到 读 取 的 资源 文件 。FileReader 接口 会 返回 NotFoundError 
错误 ， 同 时 读 取 文件 的 方法 也 会 抛 出 NotFoundError 错误 异常 。 
> SecurityError: 发 生 安全 错误 。FileReader 接口 会 返回 SecurityError 错误 ， 同 时 
读 取 文 件 的 方法 也 会 抛 出 SecurityError 错误 异常 。 
> NotReadableError: 无 法 读 取 的 错误 。FileReader 接口 会 返回 NotReadableError 
错误 ， 同 时 读 取 文件 的 方法 也 会 抛 出 NotReadableError 错误 异常 。 
> EncodingError: 编码 限制 的 错误 。 通常 是 数据 的 URL 表示 的 网 址 长 度 受 到 限制 。 
2. 接口 的 方法 
FileReader 接口 拥有 5 个 方法 ， 其 中 有 4 个 用 于 读 取 文件 ， 一 个 用 来 中 断 读 取 过 程 。 
口 readAsArrayBuffer() 方 法 
将 文件 读 取 为 数组 缓冲 区 。 该 方法 的 语法 如 下 : 
readAsArrayBuffer( <blob> ); 
参数 <blob> 表 示 一 个 Blob 对 象 的 文件 , readAsArrayBuffer() 方 法 就 是 把 该 Blob 对 象 的 
文件 读 取 为 数组 缓冲 区 。 
口 readAsBinaryString 0 方法 
将 文件 读 取 为 二 进 制 字符 串 。 该 方法 的 语法 如 下 : 
readAsBinaryString( <blob> ); 


参数 说 明 <blob> 表 示 一 个 Blob 对 象 的 文件 。readAsBinaryString() 方 法 就 是 把 该 Blob 
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对 象 的 文件 读 取 为 二 进 制 字符 串 。 
口 readAsText () 方 法 
将 文件 读 取 为 二 进 制 字符 串 。 该 方法 的 语法 如 下 : 


readAsText ( <blob> , <encoding> ); 


参数 说 明 如 下 。 

<blob> 表 示 一 个 Blob 对 象 的 文件 。readAsText() 方 法 就 是 把 该 Blob 对 象 的 文件 读 取 为 
文本 。 

<encoding>: 表示 文本 的 编码 方式 ， 默 认 值 为 UTF-8。 

口 readAsDataURL 0 方法 

将 文件 读 取 为 DataURL 字符 串 。 该 方法 的 语法 如 下 : 


readAsDataURL ( <blob> ) 

参数 <blob> 表 示 一 个 Blob 对 象 的 文件 。readAsDataURL() 方 法 就 是 把 该 Blob 对 象 的 文 
件 读 取 为 Data URL 字符 串 。 

口 abort() 方 法 

用 于 中 断 读 取 操 作 。 该 方法 的 语法 如 下 : 

abort (); 

该 方法 没有 参数 。 

3. 接口 的 事件 


口 loadstart 事件 

开始 读 取 数据 时 触发 的 事件 。 

口 progress 事件 

正在 读 取 数据 时 触发 的 事件 。 

口 load 事件 

成 功 完成 数据 读 取 时 触发 的 事件 。 

口 abort 事件 

中 断 读 取 数据 时 触发 的 事件 。 

口 error 事件 

读 取 数据 发 生 错误 时 触发 的 事件 。 

口 loadend 事件 

结束 读 取 数 据 时 触发 的 事件 ， 数 据 读 取 可 能 成 功 也 可 能 失败 。 
4. 接口 的 方法 示例 

下 面 通 过 一 个 示例 来 演示 FileReader 接口 的 4 个 读 取 文件 的 方法 。 
【示例 11-4】 FileReader 接口 的 方法 示例 。 

<!DOCTYPE html> 

<html> 


<head> 
<meta charset="utf-8"> 
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<title>FileReader 接口 的 方法 示例 </title> 
<script type="text/javascript"> 
// 读 取 文件 
function ReadAs (action){ 
var blob=document .getElementById("files") .files[0]; 
if(blob){ 
var reader = new FileReader(); /* 声明 接口 对 象 */ 
// 根 据 参数 action， 选 择 读 取 文件 的 方法 
switch (action.toLowerCase()){ 
case "binarystring": 
reader .readAsBinaryString (blob); 
/* 将 文件 读 取 为 二 进 制 字 符 串 */ 
break; 
case "arraybuffer": 
reader .readAsArrayBuffer (blob); 
/* 将 文件 读 取 为 数组 缓冲 区 */ 
break; 
case "text": 
reader .readAsText (blob); /* 将 文件 读 取 为 文本 */ 
break; 
case "dataurl": 
reader .readAsDataURL (blob); 
/* 将 文件 读 取 为 DataURL 数据 */ 
break; 
} 
reader .onload=function(e){ 
// 访 问 FileReader 的 接口 属性 result， 把 读 取 到 内 存 里 的 内 容 获取 出 来 
var result = this.result; 
// 如 果 是 图 像 文件 ， 且 读 取 内 容 为 DataURL 数据 ， 那 么 就 显示 为 图 片 
if(/image\/\w+/.test(blob.type) && action.toLowerCase()==" 


dataurl1"){ 
document .getElementById("result") .innerHTML = "<img src="'" 
result + mr />"s 
J}else{ 
document .getElementById("result") .innerHTML = result; 
| 
} 
四 
</script> 
</head> 
<body> 
<form action="" method="post"> 


<input type="file" id="files" multiple accept="image/*" /> 
<input type="button" value=" 读 取 为 数组 缓存 区 " onclick="ReadAs('Array 
Buffer")™ /> 
<input type="button" value=" 读 取 为 二 进 制 " onclick="ReadAs ('Binarystring')" 
A 
<input type="button" value=" 读 取 为 文本 " onclick="ReadAs('Text')" /> 
<input type="button" value=" 读 取 为 图 像 " onclick="ReadAs('DataURL')" /> 
<p id="result"></p> 
</form> 
</body> 
</html> 


运行 结果 如 图 11-2 所 示 。 
代码 分 析 : 在 示例 11-4 中 ， 使 用 ReadAs0 函 数 读 取 file 类 型 的 表单 元 素 选择 的 文件 。 
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在 ReadAs() 函 数 中 ， 通 过 参数 action 的 值 ， 选 择 不 同 的 读 取 方法 ， 分 别 实现 了 FileReader 
接口 的 4 个 读 取 文 件 的 方法 。 在 页 面 按钮 中 ， 我 们 通过 传递 不 同 的 action 参数 ， 响 应 不 同 
的 读 取 文件 的 方法 。 如 图 11-2 所 示 ， 我 们 选择 了 一 个 图 片 文件 ， 然 后 单 击 各 个 按钮 ， 页 面 
会 根据 读 取 文件 的 方法 的 不 同 ， 显 示 不 同形 式 的 内 容 。 


OTileheader 接 口 的 方法 示 从 ileRea: 的 久 回 TileResder 接 口 的 方法 示例 时 @@ Tileheader 接 口 的 方法 示例 
© Oymi40 9 © Oyrmi40:8 © Oyrv740:8080/hc/Chapterl1/C 
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图 11-2 ”FileReader 接口 读 取 文件 的 方法 


5. 接口 的 事件 示例 


FileReader 接口 提供 了 6 个 事件 ， 下 面 通过 一 个 示例 来 查看 各 个 事件 的 响应 顺序 。 
【示例 11-5】 FileReader 接口 的 事件 响应 顺序 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>FileReader 接口 的 事件 响应 顺序 </title> 
<script type="text/javascript"> 
Var blob=document .getElementById("files") .files[0]; 
Var message = document .getElementById("message") 7 
var reader = new FileReader (); /* 声明 接口 对 象 */ 
// 添 加 loadstart 事件 
reader .onloadstart=function(e){ 
message.innerHTML+= "Event:loadstart;<br />"; 
} 
// 添 加 progress 事件 
reader .onprogress=function(e){ 
message.innerHTML+= "Event:progress;<br />"; 


} 

// 添 加 Load 事件 

reader.onload=function(e){ 
message.innerHTML+= "Event:load;<br />"; 


} 
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// 添 加 abort 事件 
reader .onabort=function (e)1{ 
message .innerHTML+= "Event:abort;<br />"; 


} 

// 添 加 error 事件 

reader .onerror=function(e){ 
message.innerHTML+= "Event:error;<br />"; 


} 
// 添 加 loadend 事件 
reader.onloadend=function (e){ 
message.innerHTML+= "Event:loadend;<br />"; 
} 
reader .readAsDataURL (blob); /* 读 取 文件 至 内 存 */ 
}</script> 
</head> 
<body> 
<form action="" method="post"> 
<input type="file" id="files" multiple accept="image/*" /> 
<input type="button" value=" 读 取 文 件 " onclick="FileReaderEvent()" /> 
<p id="message"></p> 
</form> 
</body> 
</html> 


运行 结果 如 图 11-3 所 示 。 


同 回 加 
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Event:loadstart: 
Event:progress.; 
Event: load: 
Event: loadend: 


图 11-3 ”FileReader 接口 在 Firefox 中 的 事件 响应 顺序 


代码 分 析 : 在 示例 11-5 中 ， 为 FileReader 接口 对 象 添加 了 所 有 的 事件 (6 个 事件 ) ， 
每 个 事件 的 处 理 仅 仅 是 输出 事件 的 名 称 。 如 图 11-3 所 示 , 当选 择 好 文件 并 单 击 “ 读 取 文 件 ” 
按钮 时 ， 页 面 会 按照 FileReader 接口 事件 的 响应 顺序 执行 各 个 事件 的 输出 。 


11.3 实验 室 : 把 图 片 拖 入 浏览 器 


在 HTML 5 之 前 ， 很 难 实现 超出 浏览 器 边界 的 事情 ， 如 把 电脑 上 的 文件 拖 入 浏览 
就 很 难 实现 。 本 节 就 用 前 面 学 习 的 拖 放 API 和 文件 API 来 做 这 样 的 事情 。 
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1. 案例 简介 


本 节 的 案例 是 把 电脑 上 的 图 片 拖 入 浏览 器 的 网 页 中 的 指定 区 域 ， 并 显示 


果 如 图 11-4 所 示 。 
接 下 来 ， 我 们 就 一 步 一 步 地 实现 这 个 功能 。 


上 来。 实现 效 


辐 把 图 片 拖 入 浏览 器 


回 
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入 图 片 梧 
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西湖 2. jpe 西湖 3 花 港 观 鱼 . jpg 


西湖 7. jpg 


图 11-4 把 电脑 上 的 图 片 拖 入 浏览 器 


2. 设计 网 页 基本 元 素 


页 面 中 ， 设 计 一 个 div 元 素 ，id 特性 为 dropTarget， 用 于 容纳 拖 进 来 的 图 片 ， 是 一 个 


图 片 容器 。 页 面 中 还 针对 此 容器 ， 添 加 了 基本 的 样式 表 ， 如 示例 11-6 所 示 。 


【示例 11-6】 把 图 片 拖 入 浏览 器 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 把 图 片 拖 入 浏览 器 </title> 

<style type="text/css"> 

#dropTarget { 
width:300px; 
height:300px; 
margin:1l0px 0 0 0; 
border:1lpx solid #015EAC; 

} 

#dropTarget img { 
width:100px; 
height:60px; 
margin:5px; 

| 

</style> 

</head> 
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<body> 


<div> 把 图 片 拖 放 到 下 面 的 方 框 。</div> 


<div id="dropTarget"></div> 


</body> 
</html> 


3. 基本 函数 的 实现 
首先 定义 一 个 全 局 的 变量 ， 表 示 图 片 容器 的 对 象 ， 方 便 各 个 函数 访问 。 这 里 还 定义 了 


一 个 用 于 拖 放 的 drop 导 


有 E 件 处 理 函 数 dropHandle0 和 加 载 单个 文件 的 函数 loadImg0,， 用 于 对 


拖 放 进来 的 图 片 文 件 进行 处 理 。 


<script type="text/javascript"> 
// 定 义 目 标 元 素 的 变量 
Var target; 
//drop 事件 处 理 函 数 
function dropHandle(e) { 
var fileList = e.dataTransfer.files, /* 获 取 拖 放 的 文件 */ 
fileType; 
// 遍 历 拖 放 的 文件 
for (var i=0;i<fileList.length;i++){ 
fileType = fileList[i].type; 
if (fileType.indexof('image') == -1) { 
alert (' 请 拖 放 图 片 '); 


return; 


} 

// 加 载 单个 文件 

loadImg (fileList[i]); 
} 


} 
// 加 载 指定 的 图 片 文件 ， 并 追加 至 target 对 象 的 元 素 中 
function loadImg (file){ 
// 声 明 接口 对 象 
Var reader = new FileReader() 
// 添 加 load 事件 处 理 
reader.onload = function(e) { 
Var oImg = document.createElement('img'); 
oImg.src = this.result; /* 获取 读 取 的 文件 数据 */ 
target .appendChild(oImg); 


} 

// 读 取 文件 

reader .readAsDataURL (file); 
| 
</script> 


4. 页 面 加 载 处 理 


页 面 加 载 完 成 后 ， 获 取 target 目标 容器 ， 用 于 存放 拖 放 进 来 的 图 片 。 给 target 容器 添 


<script type="text/javascript"> 
window.onload = function() { 
// 获 取 目 标 元 素 
target = document .getElementById('dropTarget'); 


加 dragover 事件 处 理 和 drop 事件 处 理 ， 其 中 drop 事件 处 理 函 数 就 是 前 面 的 脚本 函数 
dropHandle()。 代 人 码 如 下 : 
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// 给 目标 元 素 添 加 dragover 事件 处 理 

target .addEventListener('dragover', function(e) { 
e.preventDefault (); 

}, false); 


// 给 目标 元 素 添加 drop 事件 处 理 ， 处 理 函 数 为 dropHandle () 
target .addEventListener('drop', dropHandle, false); 
} 
</acript> 
至 此 , 文件 拖 放 功 能 已 经 完全 实现 。 如 图 11-4 所 示 , 可 以 直接 把 电脑 里 的 图 片 文件 拖 
入 该 页 面 的 容器 中 。 


11.4 小 结 


本 章 主要 讲解 了 HTML 5 的 拖 放 API 和 文件 API。 重点 讲解 了 拖 放 API 中 用 于 拖 放 数 
据 存储 的 DataTransfer 对 象 和 文件 API 中 用 于 读 取 文件 的 FileReader 接口 ， 对 于 File 对 象 
和 Blob 对 象 ， 也 要 熟练 掌握 。 本 章 的 重点 也 是 本 章 的 难点 ， 不 论 是 DataTransfer 对 象 还 是 
FileReader 接口 ， 都 提供 了 各 自 的 属性 、 方 法 和 事件 ， 需 要 多 加 熟悉 。Blob 对 象 不 容易 理 
解 ， 也 是 本 章 的 难点 。 

下 一 章 将 介绍 HTML 5 在 本 地 存储 方面 的 应 用 。 


11.5 习 题 


【习题 1】 如 何 把 页 面 元 素 变 成 可 以 拖 放 的 ? 

【习题 2】 当 有 拖 放 的 元 素 被 拖 放 到 本 元 素 中 时 ， 会 触发 一 个 拖 放 事件 ， 请 问 是 哪个 事件 ? 

【习题 3】 在 HIML 5 拖 放 的 应 用 中 ， 必 然 会 发 生 数据 交换 ， 这 种 数据 交换 的 媒介 是 
什么 ? 

【习题 4】 在 HTML 5 中 ， 人 允许 同时 选择 多 个 上 传 文件 〈 在 文件 域 中 增加 multiple 特 
性 ， 即 可 选择 多 个 文件 ) ， 将 会 得 到 一 个 包含 多 个 上 传 文件 的 对 象 ， 请 问 这 个 对 象 是 哪 一 


个 ( 单 选 ) : 
A. DataTransfer 对 象 B. FileList 对 象 C.File 对 象 
D. Blob 对 象 E. FileReader 对 象 


【习题 5】FileReader 对 象 用 于 读 取 文 件 的 数据 ， 如 何 确 定 文件 读 取 完 毕 ? 
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随 着 Web 应 用 的 发 展 ,需要 在 用 户 本 地 浏览 器 存储 更 多 的 应 用 数据 ,传统 的 使 用 cookie 
存储 的 方案 已 经 不 能 满足 发 展 的 需求 ， 而 使 用 服务 器 端 存储 的 方案 则 是 一 种 无 奈 的 选择 。 
HTML 5 的 Web Storage API 是 一 个 理想 的 解决 方案 ,可 以 在 客户 端 存储 更 多 的 数据 , 而 且 
可 以 实现 数据 在 多 个 页 面 中 共享 甚至 是 同步 。 如 果 是 存储 复杂 的 数据 ， 则 可 以 借助 Web 
SQL Database API 来 实现 ,可 以 使 用 SQL 语句 完成 复杂 数据 的 存储 与 查询 。 本 章 将 详细 讲 
解 这 两 个 本 地 存储 的 方案 。 


12.1 本 地 存储 对 象 一 Web Storage 


本 节 主 要 讲解 Web Storage API 的 属性 、 方 法 和 事件 ， 以 及 如 何 利用 此 接口 实现 数据 
的 存储 和 存储 数据 在 不 同 页 面 间 的 通信 等 内 容 。 


12.1.1 Web Storage 简介 


Web Storage 的 诞生 与 cookie 功能 的 不 足 有 着 很 大 关系 ， 下 面 对 这 方面 的 问题 进行 深 
入 探讨 。 


1. cookie 简 介 


Web 开发 者 都 会 记得 cookie 在 客户 端 存储 数据 方面 的 优越 表现 , 它 甚 至 至 今 仍 在 作为 
主要 的 客户 端 存 储 来 使 用 。 
cookie 可 用 于 在 程序 间 传 递 少量 的 数据 ， 对 于 Web 应 用 来 说 , 它 是 一 个 在 服务 器 和 客 
户 端 之 间 来 回 传送 文本 值 的 内 置 机 制 ， 服务 器 可 以 根据 cookie 来 追踪 用 户 在 不 同 页 面 的 访 
问 信 息 。 正 因 其 卓越 的 表现 ， 在 目前 的 Web 应 用 中 ，cookie 得 到 了 最 为 广泛 的 应 用 。 
尽管 如 此 ，cookie 仍然 有 很 多 不 尽 如 人意 的 地 方 ， 主 要 表现 在 以 下 方面 。 
口 大 小 的 限制 : cookie 的 大 小 被 限制 在 4KB。 在 Web 的 富 应 用 环境 中 ， 不 能 接受 文 
件 或 邮件 那样 的 大 数据 。 
口 带宽 的 限制 ， 只 要 有 涉及 cookie 的 请 求 ，cookie 数据 都 会 在 服务 器 和 浏览 器 间 来 
回 传送 。 这 样 无 论 访问 哪个 页 面 ，cookie 数据 都 会 消耗 网 络 的 带宽 。 
口 安全 风险 : 由 于 cookie 会 频繁 地 在 网 络 中 传送 ， 而 且 数 据 在 网 络 上 是 可 见 的 ， 因 
此 在 不 加 密 的 情况 下 ， 是 有 安全 风险 的 。 
口 操作 复杂 : 在 客户 端的 浏览 器 中 ， 使 用 JavaScript 操作 cookie 数据 是 比较 复杂 的 
但 是 服务 器 端 可 以 很 方便 地 操作 cookie 数据 。 
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以 上 方面 的 不 足 ， 算 是 cookie 的 缺点 ， 但 也 是 优点 ， 这 要 看 在 什么 样 的 环境 下 , 干 什 
么 用 。 一 般 在 浏览 器 富 应 用 的 环境 下 ， 仅 仅 使 用 cookie 是 不 足 的 。 但 对 于 较 小 的 数据 ， 且 
需要 在 服务 器 端 和 客户 端 频 繁 传送 的 时 候 ， 使 用 cookie 的 意义 更 大 。 

2. Web Storage 简 介 


Web Storage 可 以 在 客户 端 保 存 大量 的 数据 , 而 且 通 过 其 提供 的 接口 , 访问 数据 也 非常 
方便 。 然 而 ，Web Storage 的 诞生 ， 并 不 是 为 了 替代 cookie， 相 反 ， 是 为 了 弥补 cookie 在 
本 地 存储 中 表现 的 不 足 。 

Web Storage 本 地 存储 的 优势 主要 表现 在 以 下 几 个 方面 。 

口 存储 容量 : 提供 更 大 的 存储 容量 。 在 Firefox、Chrome、Safari 和 Opera 中 ， 每 个 
网 域 为 SMB; 在 正 8 及 以 上 则 每 个 网 域 为 10MB 。 
口 零 带宽 ， Web Storage 中 的 数据 仅仅 是 存储 在 本 地 ， 不 会 与 服务 器 发 生 任何 交互 行 

为 ， 所 以 不 存在 网 络 带 宽 的 占用 问题 。 

口 编程 接口 ，Web Storage 提供 了 一 套 丰富 的 编程 接口 ， 使 得 数据 操作 更 加 方便 。 

口 独立 的 存储 空间 : 每 个 域 (包括 子 域 ) 都 有 独立 的 存储 空间 ， 各 个 存储 空间 是 完 

全 独立 的 ， 因 此 不 会 造成 数据 的 混乱 。 

由 此 可 见 ，Web Storage 并 不 能 完全 替代 cookie，cookie 能 做 的 事情 ，Web Storage 并 
不 一 定 能 做 到 ， 如 服务 器 可 以 访问 cookie 数据 ， 但 是 不 能 访问 Web Storage 数据 。 所 以 
Web Storage 和 cookie 是 相互 补充 的 ， 会 在 各 自 不 同 的 方面 发 挥 作 用 。 

沿 着 移动 互联 网 发 展 的 路 线 ， 浏 览 器 端的 富 应 用 是 一 种 必然 的 趋势 ， 而 Web Storage 
作为 完全 的 浏览 器 客户 端的 本 地 存储 ， 将 发 挥 越 来 越 重要 的 作用 。 


12.1.2 localStorage 和 sessionStorage 


1. sessionStorage 和 localStorage 的 区 别 


Web Storage 本 地 存储 包括 sessionStorage (会话 存 储 ) 和 localStorage (本 地 存储 ) 。 
熟悉 Web 编程 的 人 员 第 一 次 接触 Web Storage 时 ,会 很 自然 地 与 session 和 cookie 去 对 应 。 
不 同 的 是 ，cookie 和 session 完全 是 服务 器 端 可 以 操作 的 数据 ， 但 是 sessionStorage 和 
localStorage 则 完全 是 浏览 器 客户 端 操作 的 数据 。 

sessionStorage 和 localStorage 完全 继承 同一 个 Storage API， 所 以 sessionStorage 和 
localStorage 的 编程 接口 是 一 样 的 。 下 面 的 章节 将 会 着 重 讲解 编程 接口 Storage API。 

sessionStorage 和 localStorage 的 主要 区 别 在 于 数据 存在 的 时 间 范 围 和 页 面 范围 ， 如 表 
12.1 所 示 。 


表 12.1 sessionStorage 和 localStorage 的 区 别 

Session Storage 
数据 会 保存 到 存储 它 的 窗口 或 标签 关闭 时 
数据 只 在 构建 它们 的 窗口 或 标签 页 内 可 见 


localStorage 
数据 的 生命 周期 比 窗口 或 浏览 器 的 生命 周期 长 
数据 可 被 同 源 的 每 个 窗口 或 者 标签 页 共享 


“288* 


第 12 章 本 地 存储 让 你 的 应 用 更 加 高 效 


2. 检测 浏览 器 支持 


的 API 之 一 


在 HIML 5 的 各 项 特性 中 ，Web Storage 的 浏览 器 支持 度 是 比较 好 的 。 目 前 ， 所 有 的 
主流 浏览 器 都 在 一 定 程度 上 支持 Web Storage。 因 而 ，Web Storage 成 为 Web 应 用 中 最 安全 
。 尽 管 如 此 ， 还 是 需要 检查 浏览 器 是 否 支 持 Web Storage， 因 为 在 某 种 情况 可 


能 会 导致 浏览 器 不 能 使 用 Web Storage 的 功能 。 
【示例 12-1】 检测 浏览 器 是 否 支持 Web Storage。 


<script type="text/javascript"> 
function CheckStorageSupport (){ 


} 


// 检 测 sessionStorage 
if(window.sessionStorage){ 


console.10g ("浏览 器 支持 sessionStorage 特性 !") ; 


}elsef{ 


console.1o0g ("浏览 器 不 支持 sessionStorage 特性 !"); 


// 检 测 localstorage 
if(window.localStorage) { 


console.1og ("浏览 器 支持 LocalStorage 特性 !"); 


}elsef{ 


console.10g ("浏览 嚣 不 支持 localStorage 特性 !"); 


window.addEventListener ("load",CheckStorageSupport, false); 
</script> 


在 Chrome 浏览 器 中 的 运行 结果 如 图 12-1 所 示 。 


Ob storsee AT 
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浏览 器 支持 sessionStorage 特 性 ! 
浏览 器 支持 localStorage 特 性 ! 
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图 12-1 在 控制 台 显示 的 检测 结果 


使 用 console.log0 方 法 ， 可 以 把 调试 的 内 容 输 出 到 浏览 器 的 控制 台 。 


12.13 


设置 和 获取 Storage 数据 


sessionStorage 和 localStorage 作为 window 的 特性 ， 完 全 继承 Storage API， 它 们 提供 
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的 操作 数据 的 方法 完全 相同 。 下 面 以 sessionStorage 特性 为 例 进行 讲解 。 
1. 保存 数据 到 sessionStorage 


sessionStorage 保存 数据 的 完整 语法 如 下 : 


window.sessionStorage.setItem("key","value"); 


参数 说 明 “key” 为 字符 串 表 示 的 “ 键 ”，“value” 为 字符 串 表示 的 “ 值 ”，setItem() 
表示 保存 数据 的 方法 。 


2. 从 sessionStorage 中 获取 数据 


如 果 知 道 保存 到 sessionStorage 中 的 “ 键 ”， 就 可 以 取 到 对 应 的 “ 值 ”。sessionStorage 
获取 数据 的 完整 语法 如 下 : 

value = window.sessionStorage.getItem("key"); 

参数 说 明 “key” 和 “value” 分 别 表示 “ 键 ” 和 “ 值 ”, 与 保存 数据 的 键 / 值 对 应 。getItem() 
为 获取 数据 的 方法 。 

3. 设置 和 获取 数据 的 其 他 写法 


对 于 访问 Storage 对 象 还 有 更 简单 的 方法 ,根据 键 / 值 的 配对 关系 , 直接 在 sessionStorage 
对 象 上 设置 和 获取 数据 ， 可 完全 避免 调用 setItem() 和 getItem() 方 法 。 

保存 数据 的 方法 也 可 写成 : 

window.sessionStorage.key = "value"; 

或 

window.sessionStorage ["key"] = "value"; 

获取 数据 的 方法 ， 更 加 直接 ， 可 写成 : 

value = window.sessionStorage.key; 

或 

value = window.sessionStorage["key"]; 

这 种 灵活 的 使 用 方法 ， 给 编程 带 来 极 大 的 灵活 性 。 当 然 ， 对 于 localStorage 来 说 ， 同 
样 具 有 上 述 设 置 数据 和 获取 数据 的 方法 。 

4. 示例 介绍 


【示例 12-2】 使 用 sessionStorage 和 localStorage。 


<script type="text/javascript"> 

function Test(){ 
// 在 localStorage 存储 localKey 的 值 为 "localValue" 
Window.localStorage.setItem("localKey","localValue"); 


// 获 取 存 储 在 localStorage 中 的 localKey 的 值 ， 并 输出 到 控制 台 
console.log (window.localStorage.getItem("localKey")); 


// 在 sessionStorage 存储 sessionKey 的 值 为 "sessionValue" 
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window.sessionStorage.setItem("sessionKey","sessionValue"); 


//// 获 取 存 储 在 sessionStorage 中 的 sessionKey 的 值 ， 并 输出 到 控制 台 


console.log (window.sessionStorage.getItem("sessionKey")); 


window.addEventListener ("load", Test, false); 
</script> 


在 Chrome 浏览 器 中 的 运行 结果 如 图 12-2 所 示 。 
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图 12-2 在 控制 台 显示 的 输出 结果 
关于 我 们 在 localStorage 和 sessionStorage 中 存储 的 数据 ， 可 借助 浏览 器 本 身 的 功能 
行 查看 ， 如 在 Chrome 浏览 器 中 ， 可 在 资源 面板 中 查看 存储 的 数据 ， 如 图 12-3 所 示 。 
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图 12-3 在 Chrome 浏览 器 中 的 资源 面板 中 查看 存储 的 数据 


12.1.4 _ Storage API 的 属性 和 方法 


在 上 一 节 中 学 习 了 如 何 使 用 setItem0 方 法 存储 数据 ， 使 用 getItem0 方 法 获取 数据 。 这 
些 方法 都 来 源 于 它们 所 继承 的 Storage API 提供 的 方法 。 
1. Storage 接口 说 明 


【示例 12-3】 Storage 接口。 
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interface Storage { 
readonly attribute unsigned long length; 
DOMString? key (unsigned long index); 
getter DOMString getItem(DOMString key); 
setter creator void setItem(DOMString key, DOMString value); 
deleter void removeItem (DOMString key); 
void clear(); 


示例 12-3 中 显示 了 接口 中 所 有 的 属性 和 方法 ， 下 面 进 行 详 细 介 绍 。 


的 ，length 属性 只 能 反映 同 源 的 键 / 值 对 数量 。 


length-1。 
口 getItem(key) 方 法 : 根据 键 返回 相应 的 数据 值 。 如 果 该 键 值 存在 ， 则 返 
返回 null。 


口 length 属性 : 表示 当前 Storage 对 象 中 存储 的 键 / 值 对 的 数量 。Storage 对 象 是 同 源 


口 key(index) 方 法 : 获取 指定 位 置 的 键 。 一 般 用 于 遍历 某 个 Storage 对 象 中 所 有 的 键 ， 
然后 再 通过 键 来 取 相 应 的 值 。 参 数 index 为 从 0 开始 的 索引 ， 最 后 - 


-个 索引 是 


回 值 ， 否 则 


口 setItem(key,value) 方 法 : 将 数据 存 入 指定 键 对 应 的 位 置 。 如 果 对 应 的 键 值 已 经 存在 ， 


则 更 新 它 。 


口 removeItem(key) 方 法 : 从 存储 对 象 中 移 除 指 定 的 键 / 值 对 。 如 果 该 键 / 值 对 存在 ， 则 


移 除 它 ， 否 则 不 执行 任何 操作 。 


口 clear0 方 法 : 清空 Storage 对 象 中 所 有 的 数据 。 如 果 Storage 对 象 是 空 的 ， 则 不 执行 


任何 操作 。 


在 使 用 sessionStorage 和 localStorage 时 ， 以 上 的 属性 和 方法 都 可 以 使 用 ， 但 需要 注意 


影响 的 范围 。 


2. 示例 介绍 


下 面 通过 一 个 示例 来 了 解 Storage 接口 的 应 用 。 下 面 以 sessionStorage 为 例 进行 介绍 。 


【示例 12-4】 使 用 Storage 对 象 保存 页 面 内 容 。 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 使 用 Storage 对 象 保存 页 面 内 容 </title> 

<script type="text/javascript"> 

// 保 存 数据 到 sessionstorage 

function SaveStorage (frm){ 
var storage = window.sessionStorage; 
storage.setItem("name",frm.name.value); 
storage.setItem("age",frm.age.value); 
storage.setItem("email",frm.email .value); 
storage.setItem("phone",frm.phone.value); 


| 
// 遍 历 并 显示 sessionStorage 中 的 数据 
function Show()1{ 
Var Storage = window.sessionStorage; 
Var result=""; 
for (var i=0;i<storage.length;i++){ 
Var key = storage.key(i); /* 获取 键 key 
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var value = storage.getItem(key);  /* 通过 键 key 获取 值 value */ 
result += key + ":" + value + "; 


} 
/* 在 指定 的 地 方 显示 获取 的 存储 内 容 */ 


document -getElementById ("formqdata") .innerHTML = result; 


/SCIPE> 
</head> 
<body> 
<form id="forml" name="forml" method="post" action=""> 
<table width="100%" border="1" bordercolor="#CCCCCC" cellpadding="3" 
cellspacing="0"> 
SE 
<tq> 姓 名 </td> 
<td><input type="text" name="name" id="name" /></td> 
</tr> 
<tr> 
<td> 年 龄 </td> 
<td><input type="text" name="age" id="age" /></td> 
/tr> 
<Er> 
<td>Email</td> 
<td><input type="text" name="email" id="email" /></td> 
</tr> 
< 
<td> 电 话 </td> 
<td><input type="text" name="phone" id="phone" /></td> 
</tr> 
<tr> 
<td></td> 
<td><input type="button" value=" 保 存 " onclick="SaveStorage (this. 
form)" /> 
<input type="button" value=" 显 示 " onclick="Show()" /></td> 
</tr> 
</table> 
</form> 
<div id="formdata"></div> 
</body> 
</html> 


运行 结果 如 图 12-4 所 示 。 
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age:30; name: 杨 习 伟 ; email :xxx@xxx. com; phone:18888888888: 


图 12-4 ”Storage 对 象 保存 的 页 面 内 容 
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代码 分 析 : 在 示例 12-4 中 ， 有 两 个 脚本 处 理 函 数 SaveStorage0 和 Show0O， 分 别 用 于 保 
存 数 据 和 显示 数据 。 其 中 保存 数据 仅 使 用 了 setItem() 方 法 , 显示 数据 则 根据 索引 遍历 “ 键 ”， 
并 根据 “ 键 ” 获 取 对 应 的 “ 值 ”， 使 用 了 key(0 方 法 和 getItem0) 方 法 。 


12.1.5 ”存储 JSON 对 象 的 数据 


虽然 使 用 Web Storage 可 以 保存 任意 的 键 / 值 对 数据 ， 但 是 一 些 浏览 器 把 数据 限定 为 字 
符 串 类 型 ， 而 且 对 于 一 些 复杂 结构 的 数据 ， 似 乎 管理 起 来 比较 混乱 ， 例 如 示例 12-4 中 ， 如 
果 要 保存 多 个 人 的 数据 ， 就 会 变 得 不 易于 管理 。 

不 过 对 于 复杂 结构 的 数据 ， 可 以 使 用 现代 浏览 器 都 支持 的 JSON 对 象 来 处 理 ， 这 也 为 
我 们 提供 了 一 种 可 行 的 解决 方案 。 

1. 序列 化 Json 格 式 的 数据 


由 于 Storage 是 以 字符 串 保存 数据 的 ， 因 此 在 保存 Json 格式 的 数据 之 前 ， 需 要 把 Json 
格式 的 数据 转换 为 字符 串 ， 称 为 序列 化 。 可 以 使 用 JSON.stringify0 序 列 化 Json 格式 的 数据 
为 字符 串 数据 。 使 用 方法 如 下 : 

var stringData = JSON.stringify(jsonObJject) ; 

以 上 代码 把 Json 格式 的 数据 对 象 jsonObject 序列 化 为 字符 串 数 据 stringData。 

2. 把 数据 反 序 列 化 为 Json 格 式 


如 果 把 存储 的 Storage 中 的 数据 以 Json 格式 对 象 的 方式 去 访问 ， 需 要 把 字符 串 数据 转 
换 为 Json 格式 的 数据 ， 称 为 反 序列 化 。 可 以 使 用 JSON-parse0 反 序列 化 字符 串 数据 为 Json 
格式 的 数据 。 使 用 方法 如 下 : 

var jsonObject = JSON.parse(stringData); 


以 上 代码 把 字符 串 数据 stringData 反 序 列 化 为 Json 格式 的 数据 对 象 jsonObject。 


外 提示 : 反 序 列 化 字符 串 为 Json 格式 的 数据 ， 也 可 以 使 用 eval0 函 数 ， 但 eval0 函 数 是 把 
任意 的 字符 串 转 化 为 脚本 ,有 很 大 的 安全 隐患 。 但 是 JSON.parse() 只 反 序列 化 Json 
格式 的 字符 串 数据 ， 如 果 字 符 串 数据 不 符合 Json 数据 格式 ， 则 会 产生 错误 ， 同 时 
也 减少 了 安全 隐患 。 但 是 执行 效率 方面 eval() 函 数 要 快 很 多 。 


3. 示例 介绍 


下 面 更 改 一 下 示例 12-4 中 的 脚本 代码 ， 存 储 Json 格式 的 数据 ， 每 次 单 击 “ 保 在 ” 按 
均 会 增加 一 个 键 / 值 对 ， 每 个 键 的 值 都 包含 了 一 次 的 保存 数据 。 

【示例 12-S】 使 用 Storage 对 象 存 储 Json 数据 。 

<script type="text/javascript"> 

var flag = 1; 


window.sessionSstorage.clear (); 


// 保 存 数据 到 sessionStorage 


function SaveStorage (frm){ 


刘 
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// 使 用 表单 数据 建立 JSON 对 象 
var jsonObject = new Object(); 
jsonObject.name = frm.name.value; 
jsonObject.age = frm.age.value; 
jsonObject .email = frm.email.value; 
// 序 列 化 JSON 对 象 为 字符 串 数 据 
var stringData = JSON.stringify(jsonObject) 
// 存 储 字 符 串 数据 至 Storage 
var storage = window.sessionSstorage; 
storage.setItem("key"+flag, stringData); 
// 改 变 键 标 识 
flag++; 

|: 

// 遍 历 并 显示 sessionStorage 中 的 数据 

function Show()1{ 
Var storage = window.sessionStorage; 


Var result = ""; 
for (var i=0;i<storage.length;i++){ 
var key = storage.key (i); /* 获取 键 key */ 


var stringData = storage.getItem(key) ; /* 通过 键 key 获取 值 stringData */ 
var jsonObject = JSON.parse (stringData) ; /* 反 序 列 化 字符 串 为 JSON 对 象 */ 
// 操 作 JSON 对 象 ， 并 显示 存储 的 内 容 

result += "姓名 :"+ jsonObject.name+"; 年 龄 :"+ jsonobject.age+"; 邮 
件 :"+ jsonObject.email+"<br>"; 


} 

/* 在 指定 的 地 方 显示 获取 的 存储 内 容 */ 

document .getElementById("formdata") .innerHTML = result; 
b 
SET 上演 


运行 结果 如 图 12-5 所 示 。 
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图 12-5 Storage 对 象 保存 的 页 面 内 容 


代码 分 析 : 在 示例 12-5 中 ， 保 存 数据 时 ， 先 使 用 表单 内 容 建立 一 个 JSON 对 象 ， 然 后 
序列 化 JSON 对 象 为 字符 串 数据 ， 保 存 至 Storage。 显 示 数 据 时 ， 会 遍历 所 有 存储 的 数据 ， 
并 把 读 取 的 数据 反 序列 化 一 个 JSON 对 象 ， 然 后 再 对 该 对 象 进行 操作 。 

显然 ， 借 助 JSON 对 象 来 保存 数据 ， 可 以 把 复杂 的 数据 变 得 简单 而 有 效 。 
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12.1.6 _ Storage API 的 事件 


有 时 候 ， 会 存在 多 个 网 页 或 标签 页 同时 访问 存储 的 数据 的 情况 。 为 保证 修改 的 数据 能 
够 及 时 反馈 到 另 一 个 页 面 ，HTML 5 的 Web Storage 内 建立 一 套 事件 通知 机 制 ， 会 在 数据 
更 新 时 触发 。 无 论 监听 的 窗口 是 否 存储 过 该 数据 ， 只 要 与 执行 存储 的 窗口 是 同 源 的 ， 都 会 
触发 Web Storage 事件 。 

像 下 面 这 样 ， 添 加 监听 事件 后 ， 即 可 接收 同 源 窗口 的 Storage 事件 : 


window.addEventListener ("storage",EventHandle, true); 


storage 是 添加 的 监听 事件 ， 本 节 主 要 介绍 这 个 监听 事件 。 只 要 是 同 源 的 Storage 事件 
发 生 (包括 sessionStorage 和 localStorage) ， 都 能 够 因数 据 更 新 而 触发 事件 。Storage 事件 
的 接口 如 示例 12-6 所 示 。 
【示例 12-6】 StorageEvent 事件 接口 。 


interface StorageEvent : Event { 
readonly attribute DOMString key; 
readonly attribute DOMString? oldValue; 
readonly attribute DOMString? newValue; 
readonly attribute DOMString url; 
readonly attribute Storage? storageArea; 
}; 


StorageEvent 对 象 在 事件 触发 时 ， 会 传递 给 事件 处 理 程序 ， 它 包含 了 与 存储 变化 有 关 
的 所 有 必要 的 信息 。 

口 key 属性 : 包含 了 存储 中 被 更 新 或 删除 的 键 。 

口 oldValue 属性 : 包含 了 更 新 前 键 对 应 的 数据 。 如 果 是 新 添加 的 数据 ， 则 oldValue 


属性 值 为 null。 
口 newValue 属性 : 包含 了 更 新 后 的 数据 。 如 果 是 被 删除 的 数据 ， 则 newValue 属性 值 
为 null。 


口 ufl 属 性: 指向 Storage 事件 的 发 生源 。 

口 storageArea 属性 : 该 属性 是 一 个 引用 ， 指 向 值 发 生 改 变 的 localStorage 或 
sessionStorage。 这 样 ， 处 理 程序 可 以 方便 地 查询 到 Storage 中 的 当前 值 ， 或 者 基于 
其 他 的 Storage 执行 其 他 操作 。 


12.1.7 ”实验 室 : 在 两 个 窗口 中 实现 通信 


当 给 其 中 一 个 页 面 添 加 Storage 事件 的 时 候 ， 如 果 同 源 的 另 一 个 页 面 更 改 了 存储 的 
Storage 数据 ， 就 会 触发 Storage 事件 ， 我 们 可 以 根据 此 事件 获取 最 新 的 存储 数据 或 执行 其 
他 处 理 。 

下 面 一 起 看 一 个 窗口 通信 示例 。 在 窗口 1 中 改变 Storage 数据 ， 可 在 窗口 2 中 获取 数 

【示例 12-7】 窗口 通信 Pagel: 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 窗 口 通信 Page1</title> 
<script type="text/javascript"> 
function SaveStorage (frm){ 
// 保 存 数据 到 localstorage 
window.localStorage.name=document .getElementById("name") .value; 
上 
</aeript> 
</head> 
<body> 
姓名 <input type="text" name="name" id="name" /> 
<input type="button" value=" 保 存 " onclick="SaveStorage (this.form)" /> 
</body> 
</html> 


【示例 12-8】 窗口 通信 Page2: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 窗 口 通信 Page2</title> 
<script type="text/javascript"> 
function EventHandle (e){ 
Var storage = window.localStorage; 
Var result = ""; 
result+="<br /> 姓名 :"+storage .name; 
result+="<br />key:"+e.key: 
result+="<br />oldValue:"+te.oldValue; 
result+="<br />newValue:"+e.newValue: 
result+="<br />url:"+e.url; 
result+="<br />storageArea:"+JSON.stringify (e.storageArea); 
/* 在 指定 的 地 方 显示 获取 的 存储 内 容 */ 
document .getElementById ("formdata") .innerHTML = result; 


} 

// 添 加 监听 事件 Storage 

window.addEventListener ("storage",EventHandle, true); 
</script> 

</head> 

<body> 

<div id="formdata"></div> 

</body> 

</html> 


运行 结果 如 图 12-6 所 示 。 

代码 分 析 : 在 示例 12-7 中 的 Pagel 页 面 ， 会 把 输入 表单 里 的 姓名 保存 在 localStorage 
中 ， 而 且 可 以 随时 更 改 存储 的 值 。 在 示例 12-8 中 的 Page2 页 面 ， 注 册 了 Storage 事件 的 监 
听 ， 当 存储 在 localStorage 中 的 数据 发 生 改 变 时 ， 会 触发 Page2 中 的 Storage 事件 ， 并 执行 
EventHandleO) 函 数 , 把 保存 在 localStorage 里 的 数据 显示 出 来 .如 图 12-6 所 示 , 当 修 改 Pagel 
中 的 姓名 时 ，Page2 中 的 内 容 会 即时 发 生 改 变 。 

通过 Storage 实现 的 窗口 通信 ， 可 以 实现 多 个 窗口 的 数据 同步 。 如 果 是 后 台 异 步 获取 
数据 并 更 新 Storage 存储 数据 ， 同 样 可 以 利用 此 事件 ， 完 成 数据 的 及 时 同步 。 
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[3 
CC 加 yzw740:808 


姓名 : 李 四 
key:name 


oldValue: 张 三 


newValue: 李 四 
url:http://yxw?40:8080/hc/Chapter12/Codel2-Test. html 
storageArea: { ”name”:” 李 四 ”} 


图 12-6 窗口 通信 


12.2 本 地 数据 库 一 Web SQL Database 


为 了 进一步 加 强 客户 端的 存储 能 力 ，HTML 5 引入 了 本 地 数据 库 的 概念 。 但 HTML 5 
的 数据 库 API 的 具体 细节 仍 在 完善 ， 其 中 Web SQL Database 就 是 数据 库 方案 之 一 。 实 际 
上 ，Web SQL Database 并 不 包含 在 HTML 5 规范 之 中 ， 它 是 一 个 独立 的 规范 ， 引 入 了 使 用 
SQL 操作 客户 端 数 据 库 的 API。 最 新 版 本 的 Chrome、Safari 和 Opera 浏览 器 都 已 经 实现 
Ts 


12.2.1 Web SQL Database 简介 


Web SQL Database 规范 使 用 的 是 SQLite 数据 库 ， 它 允许 应 用 程序 通过 一 个 异步 的 
JavaScript 接口 访问 数据 库 。 虽 然 Web SQL 不 属于 HTML 5 规范 ， 而 且 HTML 5 最 终 也 不 
会 选择 它 ， 但 是 对 于 移动 领域 是 非常 有 用 的 ， 因 为 在 任何 情况 下 ，SQL API 在 数据 库 中 的 
数据 处 理 能 力 都 是 无 法 比拟 的 。 

SQLite 是 一 款 轻型 的 数据 库 ， 遵 循 ACID 的 关系 型 数据 库 管理 系统 。 它 的 优势 是 嵌入 
式 的 ， 且 占用 资源 非常 低 ， 只 需要 几 百 KB 的 内 存 就 可 以 了 。 在 跨 平 台 方 面 ， 它 能 够 支持 
Windows/Linux 等 主流 操作 系统 ， 同时 能 够 跟 很 多 程序 语言 如 CWPHP/Java/JavaScript 等 结 
合 ; 它 包 含 ODBC 接口 ; 在 处 理 速度 方面 也 非常 可 观 。 

口 Web SQL Database 规范 中 定义 了 如 下 3 个 核心 的 方法 。 

> openDatabase() 方 法 : 使 用 现 有 的 数据 库 或 新 建 数据 库 来 创建 数据 库 对 象 。 
> transaction() 方 法 : 允许 我 们 控制 事务 的 提交 或 混 滚 。 
> executeSql0 方 法 : 用 于 执行 真实 的 SQL 查询 。 
提示 : 在 下 面 内 容 的 介绍 中 ， 会 涉及 很 多 SQL 语句 ， 如 果 对 SQL 不 熟悉 ， 那 么 在 继续 
学 习 本 章 内 容 之 前 ， 最 好 先 学 习 一 下 SQL 相关 教程 。 
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12.2.2 ”操作 Web SQL 数据 库 


1. 打开 数据 库 


openDatabase() 方 法 可 以 打开 一 个 已 经 存在 的 数据 库 ， 如 果 数 据 库 不 存在 ， 它 可 以 创建 
数据 库 。 创 建 并 打开 数据 库 的 语法 如 下 : 

var db = openDatabase ("TestDB"，"1.0", "测试 数据 库 ",2*1024*1024，creation 

Callback) 


全 说 明 : 该 方式 有 5 个 必需 的 参数 ， 第 一 个 参数 表示 数据 库 名 ; 第 二 个 参数 表示 版 本 号 ; 
第 三 个 参数 表示 数据 库 的 描述 ; 第 四 个 参数 表示 数据 库 的 大 小 ; 第 五 个 参数 表示 
创建 回调 函数 。 其 中 第 五 个 参数 是 可 选 的 。 


2. 创建 数据 表 


transaction() 方 法 可 以 进行 事务 处 理 ，executeSql() 方 法 可 以 执行 SQL 语句 。 可 以 同时 
使 用 这 两 个 方法 ， 在 事务 中 处 理 SQL 语句 。 创 建 数据 表 的 方法 如 下 : 
db .transaction (function (tx){ 


tx.executeSql ('CREATE TABLE IF NOT EXISTS UserName (id unique，Name) ') 
]) 7 


全 说 明 : 使 用 transaction() 方 法 传递 给 回调 函数 的 tx 是 一 个 transaction 对 象 ， 然 后 使 用 
transaction 对 象 的 executeSql0 方 法 ， 可 以 执行 SQL 语句 。 这 里 的 SQL 语句 就 是 
创建 数据 表 的 命令 。 


3. 添加 数据 至 数据 库 表 


与 创建 数据 表 一 样 ， 也 可 以 使 用 transaction() 方 法 和 executeSql0 方 法 ， 仅 仅 是 SQL 语 
名 不同。 我 们 使 用 插入 数据 的 SQL 语句 执行 数据 的 插入 操作 。 添 加 数据 至 数据 库 表 的 方法 
如 下 : 
db .transaction (function (tx){ 
tx .executeSql ('INSERT INTO UserName (id, Name) VALUES (1，" 张 三 ") ') 


tx .executeSql ('INSERT INTO UserName (id, Name) VALUES (2，" 李 四 ") ') : 
用 


且说 明 : 两 个 包含 Insert INTO 命令 的 SQL 语句 ， 表 示 插 入 数据 ， 将 会 在 本 地 数据 库 
TestDB 中 的 UserName 表 中 添加 两 条 数据 。 
4. 读 取 数 据 库 中 的 数据 


仍然 使 用 transaction0 方 法 和 executeSql(0) 方 法 ， 使 用 查询 SQL 语句 ， 并 在 executeSql0 
方法 中 ， 添 加 匿名 的 回调 处 理 函 数 。 
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qdb .transaction (function (tx) { 
tx.executeSql ('SELECT * FROM UserName' ,[] ,function(tx,results)1{ 
Var len = results.rows.length; 
for (var i=0;i<len;i++){ 
console.log(results .rows .Item(I) .Name); 
上 
be nall)s 
]) 7 


全 说 明 : executeSql() 方 法 中 执行 了 包含 Select 命令 的 SQL 语句 ， 表 示 查 询 ， 将 从 本 地 数 


据 库 TestDB 中 的 UserName 表 中 查询 信息 。 查 询 出 来 的 结果 会 传递 给 匿名 的 回 
调 函数 ， 我 们 可 以 在 回调 函数 中 处 理 查询 的 结果 ， 如 控制 台 输 出 结果 。 


12.2.3 ”实验 室 : 基本 的 数据 库 操作 示例 


本 节 将 使 用 Web SQL 数据 库 实现 数据 的 存储 ， 并 实现 针对 数据 库 的 添加 、 更 新 、 删 
除 和 查询 等 基本 操作 。 


1， 案例 简 介 


设计 一 个 简易 的 管理 页 面 ， 包 含 一 个 填写 姓名 的 表单 ， 并 有 一 个 “查询 ”按钮 ， 可 以 
查询 Web SQL 数据 库 中 的 数据 ;“ 添 加 ”按钮 可 以 添加 数据 。 如 果 单 击 列 表 中 的 “编辑 ”， 
则 表单 会 针对 该 项 进行 编辑 更 新 ， 实 际 效果 如 图 12-7 所 示 。 


全 本 地 数据 库 访 问 示例 
€ C yr?40:808 


图 12-7 数据 库 操作 示例 


2. 页 面 元 素 设计 

设计 的 页 面 主要 包含 以 下 几 个 方面 : 用 于 填写 姓名 的 输入 框 ， 能 自动 切换 添加 /更 新 的 
按钮 ， 一 个 “查询 ”按钮 。 表 单 下 面 是 显示 列表 的 区 域 。 页 面 按钮 的 click 事件 处 理 函 数 会 
在 后 面 实现 。 

【示例 12-9】 本 地 数据 库 操 作 页 面 。 
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<!DOCTYPE HTML> 

<html> 

<head> 

<title> 本 地 数据 库 访 问 示例 </title> 

<style type="text/css"> 

2 <!-= 省 略 样式 表 > 

</style> 

</head> 

<body> 

<form> 
<input id="id" name="id" type="hidden" /> 
<input id="name" name="name" type="text" placeholder=" 请 输入 姓名 " /> 
<input type="button" id="Submit" name="Submit" value=" 添 加 "onclick=" 
Insert()" /> 
<input type="button" value=" 查 询 " onclick="Query()" /> 

</form> 

<ul id="msg" name="msg"> 

</ul> 

</body> 

</html> 


3， 初始 化 页 面 的 脚本 


页 面 加 载 时 初始 化 ， 做 两 个 处 理 操作 。 首 先 打 开 数 据 库 ， 如 果 数 据 库 不 存在 ， 则 创建 
数据 库 ， 其 次 是 确保 数据 表 存 在 ， 如 果 不 存 在 ， 则 创建 数据 表 。 
<script type="text/javascript"> 
/* 打开 数据 库 ， 如 果 不 存 在 则 创建 */ 
var db = openDatabase ("TestDB"，"1.0"," 测 试 数 据 库 " ,2*1024x*1024) ; 
/* 创建 /打开 数据 表 ， 如 果 存 在 则 不 创建 */ 
db .transaction (function (tx){ 
tx .executeSdql ('CREATE TABLE IF NOT EXISTS UserName (id unique, Name)'); 


1); 
=Aseript> 


4. 实现 查询 功能 


查询 按钮 的 click 事件 处 理 函 数 Query0， 可 根据 关键 词 来 查询 数据 库 中 的 数据 ， 其 中 
关键 词 来 源 于 表单 中 的 姓名 输入 框 。 

另外 ， 初 始 化 表单 处 理 函 数 ， 主 要 应 用 于 两 个 方面 : 一 是 编辑 信息 时 ， 把 其 中 的 内 容 
初始 化 至 表单 中 ，“ 添 加 ”按钮 变 为 “更 新 ”按钮 ;二 是 保存 数据 和 删除 数据 后 ， 初 始 化 
表单 内 容 为 室 ， 并 把 按钮 初始 化 为 “添加 ”。 


<script type="text/javascript"> 
/* 查询 数据 */ 
function Query(){ 
Var name = document .getElementById ("name"); 
db.transaction(function (tx){ 
tx.executeSql (' SELECT * FROM UserName where Name like"%'+ name. 
value +'%" ORDER BY id DESC',[],function(tx,results){ 
var len = results.rows.length; 
Var msg=""; 
for(var i=0;i<len;i++){ 
msg += "<li>gmiddot; "™; 
msg += "<span>" + results .rows.item(i) .Name + "</span>"; 
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msg += " <a href='###' onclick=\"SetForm('"+ results. 
Fows .Item(I) .id +"','"+ results.rows.item(i) .Name +"') 


\"> 编 辑 </a>" 


msg += " <a href="'###' onclick='Delete("+ results .rows. 


item(i) .id +") '> 删 除 </a>"; 
msg += "</l1i>"; 
} 
document .getElementById("msg") .innerHTML = msg; 
2 
}) ; 


} 
/* 初始 化 表单 */ 
function SetForm(id,name){ 
if (id){ 
document .getElementById("id") .value=id; 
document .getElementById ("name") .value=name; 
document .getElementById ("Submit") .onclick=function() {Update ();} 
document .getElementById ("Submit") .value=" 更 新 "; 
}elsef{ 
document .getElementById ("id") .value=""; 
document .getElementById ("name") .value=""; 
document .getElementById("Submit") .onclick=function() {Insert ();} 
document .getElementById ("Submit") .value=" 添 加 "; 
} 
} 
</script> 


5. 实现 添加 、 修 改 和 删除 功能 


由 于 插入 到 数据 库 中 的 数据 必须 包含 编号 (id) 和 姓名 (Cname) 两 方面 的 信息 ， 添 加 
处 理 函 数 InsertO 只 能 从 页 面 获取 姓名 ， 而 编号 则 需要 查询 数据 库 以 获取 可 用 的 最 小 值 。 最 


后 才 去 保存 数据 ， 并 在 保存 数据 的 executeSql() 方 法 中 ， 添 加 保存 成 功 的 匿名 的 回调 函数 : 
初始 化 表单 和 显示 所 有 信息 。 


更 新 处 理 函 数 Update0， 可 以 从 表单 获取 两 个 信息 编号 〈id) 和 姓名 (name) ， 所 以 


可 以 直接 操作 数据 库 更 新 信息 ， 并 添加 同样 的 保存 成 功 的 匿名 的 回调 函数 。 


删除 处 理 函 数 Delete(id)， 传 递 了 一 个 编号 〈id) ， 通 过 编号 可 以 直接 删除 数据 表 中 的 


记录 。 
所 有 的 操作 实现 如 下 : 


<script type="text/javascript"> 
/* 添加 数据 */ 
function Insert(){ 
var name = document.getElementById("name"); 
if(name.value =="")return; /* 没有 值 ， 则 不 处 理 */ 
Var maxid; 
/* 获取 可 用 的 最 小 id 值 */ 
db.transaction(function (tx) 1{ 
tx .executeSdql (' SELECT id FROM UserName ORDER BY id DESC',[], 
function(tx,result){ 
if(result.rows.length){ 
maxid = parseInt(result.rows.item(0) .id) + 1; 
}elsef{ 
maxid = 1; 


上 
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ly 
Te 
/* 添加 一 条 数据 ， 并 更 新 显示 */ 
db.transaction (function (tx) { 
tx.executeSql ('INSERT INTO UserName (id, Name) VALUES ('+maxid+', 
"+ name.value +'")',[],function(tx,result){ 
SetForm(); 
Query (); 
]}) 7 
3 


. 
/* 更 新 数据 */ 
function Update(){ 
db.transaction (function (tx){ 
var id = document.getElementById("id"); 
Var name = document.getElementById ("name") 
console.log (name .value) : 
tx .executeSql ('Update UserName Set Name = " '+ name.value +'" where 
id='+ id.value,[] ,function (tx,result) 1{ 
SetForm() 
Query() 
]) 7 
]) 
} 
/* 删除 数据 */ 
function Delete(id){ 
db.transaction (function (tx){ 
tx.executeSql ('Delete From UserName where id='+ id,[],function 
(tx,result){ 
SetForm(); 
Query (); 
D); 
]}) 7 


} 
</acript> 


至 此 ， 与 数据 有 关 的 基本 操作 已 经 完成 ， 我 们 可 以 在 运行 的 页 面 上 实现 数据 的 添加 、 
修改 、 删 除 和 查询 ， 如 图 12-7 所 示 。 


123. 水 结 


本 章 主要 讲解 了 HTML 5 的 本 地 存储 的 概念 ， 包 括 HTML 5 的 Web Storage 和 独立 规 
范 的 Web SQL 数据 库 。 其 中 重点 讲解 了 Web Storage 接口 的 方法 和 事件 ， 并 介绍 如 何 利用 
Web Storage 事件 实现 窗口 间 的 数据 通信 。 另 外 还 重点 讲解 了 JSON 对 象 ， 以 扩展 Storage 
对 象 存储 的 复杂 性 。 本 章 中 比较 难 的 部 分 是 对 Storage 编程 接口 的 理解 ， 以 及 与 
sessionStorage 和 localStorage 的 关系 。Web SQL 数据 库 对 于 很 少 接触 数据 库 的 前 端 工程 师 
来 说 ， 是 一 个 大 的 挑战 。 下 一 章 将 介绍 HTML 5 著名 的 离线 应 用 。 
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12.4 习 题 


【习题 1】Web Storage 本 地 存储 包括 哪 两 个 方面 ? 

【习题 2】JSON 对 象 可 以 协助 Web Storage 保存 复杂 结构 的 Json 格式 的 数据 , 它 是 如 
何 对 Json 格式 的 数据 进行 序列 化 和 反 序 列 化 的 ? 

【习题 3】 一 旦 Web Storage 本 地 存储 的 数据 发 生变 化 ， 即 可 触发 Storage 事件 。 请 编 
写 两 个 页 面 : 在 第 一 个 页 面 中 更 新 sessionStorage 或 localStorage， 然 后 在 第 二 个 页 面 上 监 
听 这 些 数据 的 变化 。 

【习题 4】Web SQL Database 可 以 在 本 地 存储 更 多 更 复杂 的 数据 ， 目 前 Web SQL 
Database 规范 中 定义 了 哪 三 个 核心 的 方法 ? 
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随 着 越 来 越 多 的 应 用 移植 到 了 Web 上 ， 人 们 对 Web 应 用 的 依赖 逐渐 增强 ， 对 Web 应 
用 的 要 求 也 越 来 越 高 。 但 是 Web 应 用 通常 都 有 一 个 致命 的 缺陷 ， 就 是 如 果 用 户 不 能 连接 网 
络 或 网 络 不 畅通 , 就 无 法 使 用 Web 应 用 程序 .为 了 适应 网 络 环境 不 佳 或 减少 对 网 络 的 占用 ， 
HTML 5 综合 Web 应 用 和 桌面 应 用 的 优势 ， 提 供 了 在 本 地 缓存 应 用 程序 的 API， 也 叫 Web 
的 离线 应 用 API。 本 章 将 详细 讲述 HTML 5 的 离线 应 用 接口 ， 以 及 与 之 相关 的 本 地 缓存 文 
件 清单 manifest。 


13.1 Web 离线 应 用 缓存 


HTML 5 新 增 的 离线 的 Web 应 用 , 代表 Web 领域 发 展 的 新 方向 ,即便 是 在 没有 网 络 的 
情况 下 ， 仍 然 可 以 使 用 网 络 资源 。 而 离线 应 用 则 是 通过 离线 应 用 缓存 实现 的 。 


1. 新 增 的 离线 应 用 缓存 


传统 的 Web 应 用 程序 常常 会 遇 到 一 个 很 大 的 问题 ,就 是 网 络 不 好 时 ,就 无 法 使 用 网 络 
上 提供 的 应 用 程序 。HTML 5 借鉴 了 桌面 应 用 程序 的 特征 ， 引 入 了 离线 应 用 缓存 。 

Web 应 用 程序 可 通过 浏览 器 的 离线 应 用 缓存 功能 ， 提 前 把 与 应 用 相关 的 资源 文件 缓存 
到 本 地 ， 当 断 开 网 络 或 网 络 环境 不 佳 时 ， 用 户 仍然 可 以 继续 浏览 未 浏览 完成 的 内 容 。 

离线 应 用 缓存 功能 的 另 一 个 好 处 是 可 以 永久 地 缓存 静态 的 内 容 ， 并 且 没有 缓存 过 期 的 
限制 ， 这 样 即便 在 网 络 畅通 的 情况 下 ， 仍 然 会 使 用 本 地 缓存 的 文件 ， 避 免 了 与 服务 器 的 过 
多 交互 。 这 样 ， 一 方面 节省 了 网 络 资源 ， 另 一 方面 也 能 减轻 服务 器 的 访问 压力 。 

离线 应 用 缓存 需要 以 一 种 方式 来 指明 应 用 程序 离线 时 所 需要 的 资源 文件 。 这 样 ， 浏 览 
器 才能 在 在 线 状 态 时 ， 把 这 些 资源 文件 缓存 到 本 地 。 此 后 ， 当 用 户 离线 访问 应 用 程序 时 ， 
这 些 资源 文件 会 自动 加 载 。 在 HIML 5 中 可 通过 一 个 缓存 清单 的 文件 manifest 指明 需要 组 
存 的 资源 ， 并 且 支 持 自 动 和 手动 两 种 缓存 更 新 方式 。 

此 外 ，HTML 5 还 提供 了 在 线 状态 的 检测 ， 应 用 程序 需要 检测 网 络 是 否 畅通 ， 这 样 才 
能 够 针对 在 线 和 离线 的 状态 ， 做 出 相应 的 处 理 。HTML 5 提供 了 两 种 在 线 状态 的 检测 方式 。 


2. 离线 应 用 缓存 与 传统 页 面 缓存 的 区 别 

离线 应 用 缓存 与 传统 的 页 面 缓存 有 着 巨大 的 差别 。 

首先 ， 离 线 应 用 缓存 是 为 Web 应 用 程序 服务 的 ， 是 通过 一 个 缓存 清单 来 缓存 Web 应 
用 程序 所 需要 的 资源 文件 的 ; 而 传统 的 网 页 缓存 , 仅 服 务 于 单个 页 面 ， 当 浏览 到 该 页 面 时 ， 
才 会 产生 页 面 缓存 。 


wy 
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其 次 ， 离 线 应 用 缓存 是 安全 可 靠 的 。 页 面 缓存 是 由 浏览 器 自动 完成 的 ， 无 法 确定 用 户 
在 本 地 缓存 了 哪些 页 面 。 而 离线 应 用 ， 需 要 开发 人 员 来 指定 这 些 资源 缓存 的 内 容 ， 是 通过 
服务 器 端 控制 的 ， 这 样 ， 一 方面 我 们 可 以 保证 用 户 可 以 正确 地 使 用 Web 应 用 程序 ; 另 一 方 
面 ，Web 应 用 程序 更 新 也 非常 及 时 。 

使 用 离线 应 用 缓存 ， 可 以 开发 出 更 加 强大 的 Web 应 用 程序 ， 使 用 起 来 就 如 同 本 机 的 应 
用 程序 一 样 。 


3， 离线 应 用 缓存 与 本 地 数据 存储 的 区 别 


离线 应 用 缓存 与 本 地 数据 存储 是 两 个 不 同 的 概念 。 

离线 应 用 缓存 是 把 应 用 程序 所 需要 的 资源 文件 ， 从 服务 器 端 缓存 到 本 地 的 一 种 缓存 
机 制 。 

而 本 地 数据 存储 是 在 本 地 存储 数据 ， 仅 仅 是 客户 端的 行为 ， 不 会 与 服务 器 发 生 任何 交 
互 行 为 ， 是 为 了 满足 不 同 的 存储 需求 而 提供 的 一 种 数据 存储 机 制 。 


13.2 缓存 清单 文件 manifest 


为 了 使 用 户 能 够 在 离线 状态 下 使 用 Web 应 用 程序 , 需要 开发 者 在 服务 器 端 提供 一 个 组 
存 清单 manifest 文件 。 此 清单 中 ， 列 出 了 离线 应 用 程序 需要 的 所 有 资源 文件 。 访 问 服 务 器 
时 ， 浏 览 器 会 把 这 些 资 源 文件 缓存 到 本 地 。 


1. manifest 文 件 的 格式 


F 面 通过 一 个 manifest 文件 清单 示例 进行 详细 介绍 。 
【示例 13-1】 manifest 清单 文件 : 
CACHE MANIFEST 
# 文件 的 开头 必须 是 CACHE MANIFEST 
# 可 以 在 这 里 设置 文件 的 版 本 号 
# versionl.1 
CACHE: 
css/style.css 
SCripEt:js 
NETWORK: 
images/pictrue.jpg 
轩 


FALLBACK: 

css/style2.css css/style.css 

CACHE: 

other.html 

则 浏览 器 会 在 本 地 缓存 manifest 文件 所 列 出 的 资源 文件 ， 如 图 13-1 中 的 矩形 框 区 域 
所 示 。 
关于 示例 13-1 所 描述 的 manifest 清单 文件 ， 说 明 如 下 。 
口 文件 内 容 的 第 一 行 必须 是 “CACHE MANIFEST”， 用 于 把 文件 的 作用 告诉 浏览 器 ， 

浏览 器 就 会 把 本 文件 所 列 出 的 文件 资源 进行 客户 端 缓存 。 
口 文件 中 的 注释 需要 另 起 一 行 ， 注 释 行 是 以 符号 “# ”开始 的 行 。 如 果 “#” 出 现在 
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图 13-1 缓存 在 本 地 的 资源 文件 


最 好 给 manifest 清单 文件 加 上 一 个 版 本 注释 ， 如 “version1.1”。 该 注释 并 没有 什么 
意义 ， 主 要 是 提醒 浏览 器 更 新 缓存 文件 。 

对 于 指定 的 缓存 文件 ， 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 本 示例 使 用 的 是 相 
对 路 径 。 

文件 中 有 三 个 关键 字 用 于 资源 的 分 类 ， 分 别 是 CACHE 、NETWORK 和 
FALLBACK。 

CACHE 类 别 中 指定 的 文件 是 要 被 缓存 到 本 地 的 资源 文件 。 

NETWORK 类 别 指定 的 文件 是 不 会 缓存 到 本 地 的 资源 文件 ， 只 有 在 网 络 畅通 的 情 
况 下 才能 被 访问 。 

FALLBACK 类 别 中 ， 每 行 指 定 两 个 资源 文件 。 第 一 个 文件 为 能 够 在 线 访问 时 使 用 
的 资源 文件 ， 第 二 个 文件 是 不 能 在 线 访问 时 的 资源 文件 。 

三 个 类 别 中 ， 每 个 类 别 都 是 可 选 的 。 但 是 如 果 manifest 文件 没有 指定 任何 类 别 就 
列 出 资源 文件 ， 那 么 就 是 CACHE 类 别 的 资源 文件 。 


使 用 manifest 文 件 的 方法 


页 面 元 素 html 有 一 个 特性 是 manifest， 用 于 指定 manifest 缓存 清单 文件 ， 浏 览 器 可 通 


文件 缓存 Web 应 用 程序 所 需要 的 资源 文件 。 使 用 方法 如 下 : 


<!DOCTYPE HTML> 
<htm]l manifest="cache .manifest"> 


</html> 
manifest 特性 指定 了 一 个 缓存 清单 文件 cache manifest。 浏 览 器 通过 识别 该 清单 文件 的 
行 来 确定 文件 的 类 型 是 否 为 用 于 离线 应 用 缓存 的 清单 文件 。 
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县 注 意 ; 指定 了 manifest 缓存 清单 文件 的 页 面 ， 不 需要 再 列 入 manifest 文件 中 ， 浏 览 器 会 
默认 对 该 页 面 进行 缓存 。 


3. 服务 器 端的 配置 


manifest 文件 的 MIME 类 型 是 text/cache-manifest， 在 使 用 之 前 ， 要 确保 服务 器 能 够 支 
持 该 文件 。 为 此 ， 我 们 需要 在 服务 器 端 做 一 些 配置 。 下 面 针 对 各 个 主流 服务 器 分 别 给 出 其 
配置 方法 。 

IIS 服务 器 中 的 配置 需要 如 下 步骤 。 
口 右键 单 击 需要 添加 类 型 的 网 站 ， 弹 出 对 话 框 。 
口 选择 “HTTP 头 ” 标 签 。 
口 在 MIME 映射 下 ， 单 击 “ 文 件 类 型 ”按钮 ， 弹 出 MIME 类 型 对 话 框 。 

口 在 关联 扩展 名 的 文本 框 中 输入 “manifest”， 在 内 容 类 型 文本 框 中 ， 输 入 

“text/cache-manifest”， 然 后 单 击 “ 确 定 ” 按 钮 即 可 。 

Apache 服务 器 中 的 配置 方法 是 : 找到 {apache_home}/conf/mime.types 文件 ， 并 在 文件 

中 添加 如 下 所 示 的 一 行 代码 即 可 : 


text/cache-manifest manifest 


Tomcat 服务 器 中 的 配置 方法 是 : 找到 {tomcat_home}/conf/webxml 文件 ,并 在 文件 中 添 
加 如 下 配置 节 即 可 : 


<mime-mapping> 
<extension>manifest</extension> 
<mime-type>text/cache-manifest</mime-type> 
</mime-mapping> 


Python 标准 库 中 的 SimpleHTTPServer 的 配置 方法 是 : 找到 {PYTHON_HOME}/Lib/ 
mimetypes.py 文件 ， 并 在 文件 中 添加 如 下 一 行 代码 即 可 : 


'.manifest':'text/cache-manifest manifest', 


有 了 服务 器 的 支持 ， 才 能 够 正确 地 使 用 离线 应 用 缓存 的 功能 
13.3 ”检测 浏览 器 的 网 络 状 态 


离线 的 Web 应 用 程序 在 离线 状态 和 在 线 状态 下 ， 有 不 同 的 行为 模式 , HTML 5 引入 了 
一 些 新 的 事件 ， 用 于 检测 网 络 能 和 否 正常 连接 。 通 常 是 使 用 window.navigator 对 象 的 onLine 
属性 来 检测 。 

window.navigator 对 象 的 onLine 属 性 是 一 个 标明 了 浏览 器 是 否 处 于 在 线 状态 的 布尔 值 。 
当 onLine 属性 值 为 false 时 ，Web 应 用 程序 不 会 尝试 进行 网 络 连接 ; 当 属 性 值 为 tue 时 ， 
会 尝试 进行 网 络 连 接 ， 但 不 一 定 能 确保 访问 到 相应 的 服务 器 。 下 面 通过 示例 来 介绍 网 络 状 
态 的 检测 方法 。 

【示例 13-2】 检测 在 线 状态 。 
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<script type="text/javascript"> 
// 检 测 在 线 状态 
function TestingNetwork(){ 

if (window.navigator.onLine){ 


console .1og ("在 线 状态 "); 
}elself{ 


console.1o0g ("离线 状态 "); 
} 


} 

// 添 加 在 线 状 态 监听 器 

window.addEventListener ("onLline" ,function(e)1{ 
console.1og ("在 线 状 态 ") ; 

},true); 


/ /添加 离线 状态 监听 器 
window.addEventListener ("offline",function(e){ 


console .1og ("离线 状态 "); 
},true); 
</script> 


外 说 明 : 在 示例 13-2 中 ， 介 绍 了 两 种 检测 网 络 状态 的 方法 : 一 种 是 通过 判断 window. 
navigator.onLine 属性 , 来 确定 网 络 的 状态 ; 另 一 种 是 通过 添加 事件 监听 器 的 方法 ， 
来 监听 网 络 的 状态 。 


13.4 应 用 缓存 接口 applicationCache 


HTML 5 提供 了 一 系列 操作 应 用 缓存 的 接口 , 均 包 含 在 新 增 的 window.applicationCache 
对 象 中 ， 可 触发 一 系列 与 缓存 相关 的 事件 。 


1. 检测 浏览 器 支持 情况 


使 用 Web 的 离线 应 用 , 最 好 先 检查 浏览 器 是 否 支持 它 。 这 也 是 使 用 HTML 5 新 增 接口 
的 好 习惯 ， 必 要 的 支持 性 检测 可 以 防止 不 必要 的 错误 发 生 。 
【示例 13-3】 检测 浏览 器 是 否 支持 离线 应 用 。 
<script type="text/javascript"> 
// 检 测 浏览 器 是 否 支持 离线 应 用 
if(window.applicationCache){ 
console.1og ("浏览 器 支持 离线 应 用 ") ; 


}elsef 

console.1og ("浏览 嚣 不 支持 离线 应 用 ") ; 
} 
</script> 


2. applicationCache 接 口 


离线 应 用 缓存 的 接口 包括 基本 的 属性 、 方法 和 事件 , 并 且 定义 了 离线 应 用 的 6 种 状态 。 
【示例 13-4】 applicationCache 接口 。 


interface ApplicationCache { 


“Ms 
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// 更 新 状态 
const unsigned short UNCACHED = 0; 
const unsigned short IDLE = 1; 
const unsigned short CHECKING = 2; 
const unsigned short DOWNLOADING = 3; 
const unsigned short UPDATEREADY = 4; 
const unsigned short OBSOLETE = 5; 
// 只 读 属性 
readonly attribute unsigned short status; 
// 更 新 方法 
void update (); 
void swapCache(); 
// 事 件 
attribute Function onchecking; 
attribute Function onerror; 
attribute Function onnoupdate; 
attribute Function ondownloading; 
attribute Function onprogress; 
attribute Function onupdateready; 
attribute Function oncached; 
attribute Function onobsolete; 

}; 

ApplicationCache implements EventTarget; 


下 面 我 们 就 对 applicationCache 接口 做 详细 讲解 。 
3. 接口 的 属性 status 


应 用 缓存 接口 有 一 个 状态 属性 status， 表 示 应 用 缓存 的 状态 ， 并 且 该 缓存 是 只 读 的 。 


HTML 5 为 该 状态 定义 了 6 个 数值 常量 ， 详 情 如 表 13.1 所 示 。 


表 13.1 应 用 缓存 的 6 种 状态 


缓存 状态 说 明 
UNCACHED | 0 | 未 组 存 | 下 载 中 
IDLE | UPDATEREADY | 4 | 更 新 就 
CHECKING 过 期 


一 般 的 网 页 都 没有 使 用 离线 应 用 的 功能 ， 这 些 页 面 的 应 用 缓存 状态 就 是 未 缓存 状态 
UNCACHED。 空闲 状态 IDLE 是 离线 应 用 的 典型 状态 ， 说 明 应 用 程序 所 需要 的 所 有 资源 文 


件 都 已 经 被 缓存 到 本 地 ， 不 需要 再 更 新 。 如 果 曾 经 有 应 用 缓存 ， 却 发 
则 缓存 会 进入 过 期 状态 OBSOLETE。 


4. 接口 的 方法 


应 用 缓存 接口 包含 两 个 方法 : update0 和 swapCache(。 


现 manifest 文件 丢失 ， 


口 update0 方 法 : 用 于 请 求 浏览 器 更 新 缓存 。 当 方法 被 调用 时 , 浏览 器 会 检测 manifest 


用 缓存 状态 变 成 UPDATEREADY， 同 时 会 触发 updateready 


清单 文件 ， 如 果 有 更 新 ， 就 会 重新 下 载 缓存 的 资源 文件 。 该 方法 执行 完成 后 ， 应 


事件 。 


口 swapCache( 方 法 : 用 于 手工 执行 本 地 缓存 的 更 新 。 只 能 在 applicationCache 的 


updateready 事件 被 触发 时 调用 。 而 updateready 事件 只 有 在 月 


及 务 器 端的 manifest 文 


件 被 更 新 ， 且 把 文件 内 的 所 有 资源 文件 下 载 到 本 地 后 触发 ， 而 这 一 过 程 是 update( 
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方法 所 经 历 的 。swapCache( 方 法 只 是 让 本 地 的 应 用 缓存 能 够 即时 更 新 ， 而 不 是 等 
到 下 一 次 刷新 页 面 时 更 新 。 


5. 接口 的 事件 


HTML 5 为 应 用 缓存 提供 了 8 个 事件 用 于 编程 开发 ， 详 情 如 表 13.2 所 示 。 
表 13.2 应 用 缓存 的 事件 


事 件 说 明 

checking 伶 测 应 用 缓存 时 触发 。 这 始终 是 整个 应 用 缓存 过 程 中 的 第 一 个 事件 
error 发 生 任 何 错误 时 触发 

noupdate 缓存 的 资源 文件 清单 没有 改变 时 触发 

downloading 浏览 器 发 现 更 新 并 获取 时 ， 或 者 下 载 清单 中 第 一 次 列 入 的 资源 时 触发 
progress 浏览 器 正在 下 载 资源 文件 时 触发 

updateready 清单 列表 中 所 有 资源 文件 都 更 新 完成 时 触发 

cached 清单 列表 中 所 有 资源 文件 都 下 载 

obsolete 找 不 到 应 用 缓存 清单 manifest 文 件 时 触发 


6. 测试 接口 事件 的 发 生 顺 序 


下 面 通过 一 个 示例 来 了 解 应 用 缓存 接口 事件 的 发 生 顺 序 。 
【示例 13-$】 测试 接口 事件 的 发 生 顺 序 。 


<script type="text/javascript"> 

window.applicationCache.onchecking=function(){ 
console.1og ("检查 应 用 缓存 更 新 ") ; 

} 

window.applicationCache.onnoupdate=function(){ 
console.1og ("没有 需要 更 新 的 应 用 缓存 ") ; 

} 

window.applicationCache.onupdateready=function(){ 
console .10g ("应 用 缓存 更 新 就 绪 ") ; 

} 

window.applicationCache.onobsolete=function(){ 
console.1og ("应 用 缓存 过 时 /过 期 ") ; 

; 

window.applicationCache.oncached=function(){ 
console.1og ("应 用 缓存 下 载 完毕 ") ; 

} 

window.applicationCache .onerror=function(){ 
console.1og ("应 用 缓存 出 现 错误 ") ; 

} 

window.applicationCache.onprogress=function(){ 
console.1og ("应 用 缓存 下 载 中 ") ; 

| 

window.applicationCache.ondownloading=function(){ 
console.1og ("应 用 缓存 准备 下 载 ") ; 

} 

</script> 


通过 浏览 器 控制 台 查 看 输出 结果 如 图 13-2 所 示 。 
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图 13-2 ”控制 台 输出 结果 


13.5 ”实验 室 : 图 片 画 廊 的 离线 应 用 


在 网 络 中 ， 图 片 预览 是 一 种 最 常用 的 Web 应 用 。 其 中 会 涉及 很 多 图 片 ， 而 且 对 清晰 的 
文件 进行 访问 时 ， 会 占据 很 大 的 网 络 带宽 ， 以 至 于 每 次 加 载 该 页 面 时 ， 都 会 有 漫长 的 等 待 
过 程 。 本 节 就 介绍 如 何 使 用 应 用 缓存 来 加 快 页 面 的 加 载 速 度 ， 以 及 如 何 应 对 网 络 环境 不 佳 
的 情况 。 

1. 案例 简介 


本 节 的 案例 主要 是 对 6.1.9 节 中 的 图 片 画廊 案例 进行 改进 ， 使 之 即便 在 离线 的 情况 下 
能 使 用 ， 同 时 在 后 续 的 访问 中 ， 页 面 内 容 无 须 青 次 从 服务 器 加 载 ， 而 是 直接 读 取 本 地 应 
用 缓存 ， 从 而 提高 访问 速度 ， 以 获得 更 佳 的 用 户 体验 。 
在 本 节 介 绍 的 案例 中 ， 对 于 离线 应 用 所 需要 的 服务 器 配置 不 再 讲述 仅 讲述 离线 资 
件 清单 的 设计 和 页 面 操作 applicationCache 的 功能 。 
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图 13-3 ”改进 的 图 片 画廊 
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2. 设计 网 页 元 素 


在 网 页 里 以 列表 的 形式 添加 15 张 图 片 。 由 于 图 片 文件 过 多 ， 我 们 增加 离线 应 用 缓存 
功能 ， 在 HTML 标签 内 添加 manifest 特性 ， 并 指定 缓存 清单 文件 application.manifest。 
【示例 13-6】 图 片 画廊 的 离线 应 用 。 


<!DOCTYPEHTML> 
<html manifest="application.manifest"> 
<head> 
<meta charset="utf-8"> 
<title> 图 片 画廊 </title> 
<style type="text/css"> 
<!-- 样式 表 省 略 --> 
</style> 
</head> 
<body> 
<div><input type="button" id="update"” value=" 更 新 应 用 缓存 " /></div> 
<ul id="gallery"> 
<li><a href="#" title=" 图 片 1"><img src="images/imagel.jpg"” alt=" 图 片 1" 
/></a></1i> 
<li><a href="#" title=" 图 片 2"><img src="images/image2.jpg" alt=" 图 片 2" 
/></a></1i> 
<li><a href="#" title=" 图 片 3"><img src="images/image3.jpg" alt=" 图 片 3" 
/></a></1i> 
… 省 略 了 相似 的 代码 
<1i><a href="#" title=" 图 片 15"><img src="images/image15.jpg" alt=" 图 片 
15" /></a></1i> 
</ul> 
</body> 
</html> 


3. 设计 application.manifest 文 件 


按照 以 下 方式 设计 application.manifest 文件 ， 文 件 中 列 出 了 图 片 画廊 应 用 所 需要 的 所 
有 资源 文件 。 

CACHE MANIFEST 

# 文件 的 开头 必须 是 CACHE MANIFEST 

# 可 以 在 这 里 设置 文件 的 版 本 号 


# version1.0 
CRACHE : 
images/image1.jpg 
images/image2.jpg 
images/image3.jpg 
… 省 略 了 相似 的 代码 
images/image15.jpg 
images/bark.jpg 


这 样 ， 当 用 户 浏览 该 页 面 时 ， 页 面 会 先 检查 是 否 需 要 更 新 资源 文件 ， 如 果 manifest 文 
件 没有 发 生 过 任何 改变 ， 则 不 会 再 从 服务 器 上 下 载 网 页 内 容 。 如 果 manifest 文件 发 生 过 改 
变 ， 则 重新 下 载 离线 资源 文件 以 更 新 本 地 应 用 缓存 。 

如 果 资 源 文件 发 生 了 改变 ， 而 manifest 清单 文件 没有 改变 ， 则 浏览 器 不 会 更 新 该 资源 
文件 ， 但 如 果 更 改 manifest 文件 的 版 本 ， 则 被 认为 manifest 文件 发 生 了 改变 ， 所 有 列 出 的 
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资源 文件 才 会 更 新 本 地 缓存 。 这 也 是 设置 manifest 文件 版 本 的 好 处 。 
以 下 介绍 如 何 使 用 脚本 对 页 面 进行 处 理 。 


4. 设计 手动 更 新 应 用 缓存 的 脚本 


下 面 为 页 面 中 的 “更 新 应 用 缓存 ”的 按钮 设计 脚本 处 理事 件 。 

首先 在 页 面 加 载 完 成 后 , 检查 浏览 器 是 否 支持 离线 应 用 缓存 。 如 果 支 持 离线 应 用 缓存 ， 
则 为 该 按钮 事件 添加 缓存 处 理 函数 UpdateCache0， 和 否则 就 提示 不 兼容 。 

接 下 来 的 处 理 函数 UpdateCache0 先 检测 服务 器 端的 manifest 文件 是 否 更 新 , 如 果 有 更 
新 则 重新 下 载 manifest 文件 中 的 资源 文件 ， 否 则 不 处 理 。 

最 后 ， 在 函数 UpdateCache0 中 添加 updateready 事件 处 理 ， 并 在 其 中 通过 接口 方法 
swapCache0) 来 及 时 更 新 新 的 应 用 程序 缓存 。 

在 示例 13-6 中 添加 脚本 处 理 代码 如 下 : 

<script type="text/javascript"> 

function UpdateCache (){ 


// 检 测 是 否 有 更 新 ， 有 更 新 则 下 载 更 新 的 资源 文件 
window.applicationCache .update(); 


// 应 用 缓存 更 新 完成 后 的 事件 处 理 
window.applicationCache .onupdateready=function()1{ 


console.1og ("本 地 应 用 缓存 已 经 更 新 ") ; 
if (confirm(" 本 地 应 用 缓存 已 经 更 新 ， 是 否 刷 新 页 面 获取 最 新 版 本 ? ") ) { 


// 更 新 本 地 应 用 缓存 
window.applicationCache.swapCache (); 


// 重 载 页 面 


window.location.reload(); 


} 
y 


window.onload=function(e){ 


// 检 查 浏览 器 是 否 支 持 离线 应 用 
if (window.applicationCache){ 

document .getElementById ("update") .onclick = UpdateCache; 
}elsef{ 

document .getElementById ("update") .onclick = function(){ 


alert ("浏览 器 不 支持 离线 应 用 缓存 ") ; 
I 
} 

| 

</script> 

至 此 ， 改 进 的 图 片 画 廊 的 离线 应 用 已 经 完成 。 只 要 用 户 访问 过 该 图 片 画 廊 应 用 ， 当 再 
次 访问 图 片 画廊 时 ， 就 不 再 受 网 络 的 限制 ， 仍 然 可 以 正常 地 使 用 图 片 画 廊 。 即 便 是 网 络 畅 
通 ， 该 应 用 也 不 会 首先 从 网 络 服务 器 上 下 载 图 片 资源 ， 在 很 大 程度 上 减少 频繁 刷新 带 来 的 
对 网 络 带宽 的 占用 。 


13.6 小 结 


本 章 主要 讲解 了 HTML 5 的 离线 应 用 的 概念 。 重 点 讲解 了 缓存 清单 manifest 文件 和 应 
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用 缓存 接口 applicationCache 的 属性 、 方法 和 事件 。 本章 的 难点 在 于 manifest 文件 的 使 用 方 
法 ,其 中 涉及 各 种 服务 器 的 配置 ; 另 一 个 难点 就 是 对 应 用 缓存 接口 的 理解 ,其 中 包括 update() 
方法 和 swapCache() 方 法 的 使 用 区 别 ， 以 及 众多 的 事件 处 理 。 这 些 对 于 前 端 开发 人 员 来 说 ， 
都 是 新 的 知识 、 新 的 挑战 。 

下 一 章 将 介绍 跨 文档 的 消息 传输 。 


13.7” 汉 题 


【习题 1】 请 解释 一 下 离线 应 用 缓存 与 本 地 数据 存储 的 区 别 。 

【习题 2】 请 尝试 编写 一 个 缓存 清单 文件 manifest。 

【习题 3 ] applicationCache 对 象 提供 了 一 系列 的 事件 以 跟踪 资源 的 下 载 状况 。 当 应 用 组 
存 更 新 完成 时 ， 应 触发 哪个 事件 〈 单 选 ): 

A. checking B. cached C. progress 


D. downloading E. updateready F. obsolete 
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随 着 Web 应 用 越 来 越 丰富 ， 与 来 自 不 同 站 点 及 其 页 面 进行 通信 显得 非常 重要 。 由 于 济 
览 器 都 遵循 同 源 策略 ， 不 同 站 点 的 网 页 如 果 需 要 信息 交换 就 变 得 棘手 和 复杂 。 也 正 是 基于 
这 种 需求 ，HTML 5 提供 了 两 个 重要 的 通信 模块 : 跨 文档 消息 传输 (Cross Document 
Messaging) 和 跨 源 异步 请 求 。 利 用 这 两 个 模块 ， 可 以 在 不 同 的 Web 应 用 域 之 间 进 行 非常 
安全 的 通信 ， 其 中 跨 文档 消息 传输 用 于 不 同 域 页 面 之 间 的 脚本 通信 ， 跨 源 异步 请 求 用 于 请 
求 不 同 域 的 服务 器 资源 。 本 章 就 详细 介绍 这 两 个 方面 。 


14.1 跨 文档 消息 传输 


跨 文 档 消 息 传输 用 于 实现 在 不 同 的 框架 之 间 、 窗 口 之 间 和 标签 之 间 的 跨 源 通 信 。HTML 
5 提供 了 完善 的 接口 规范 ， 在 跨 源 通信 的 同时 也 能 够 保证 其 足够 安全 。 


14.1.1” 跨 文档 消息 传输 的 实现 


HTML 5 新 增 了 网 页 之 间 的 脚本 通信 功能 ， 实 现 了 最 基本 的 相互 发 送 和 接收 信息 。 在 
实现 这 种 通信 机 制 前 ， 需 要 保证 网 页 之 间 能 够 获 
取 到 对 方 窗口 对 象 的 实例 。 可 以 实现 同 源 网 页 之 


间 的 通信 ， 也 可 以 实现 跨 源 网 页 之 间 的 通信 。 ”| 
如 图 14-1 所 示 的 中 文档 消息 传输 示意 图 , 服 。， 于 人， 服务 器 A 

务 器 A 的 页 面 a 和 服务 器 B 的 页 面 b 会 有 不 同 的 。 | 消息 传输 ， 

域名 或 端口 号 。 页 而 a 和 页 面 b 之 间 的 消息 通信 ”让 一 一 

就 是 本 节 讲 的 跨 文 档 消息 传输 ， 一 切 的 通信 仅 限 | “| i 

于 浏览 器 客户 端 。 和 和 
HTML 5 把 postMessage 接口 定义 为 发 送 消息 图 14-1 跨 文档 消息 传输 示意 图 


的 标准 方式 。 可 使 用 window 对 象 的 postMessage 
方法 向 其 他 窗口 发 送 消息 。 使 用 方法 如 下 : 
refWindow.postMessage (message,targetOrigin); 
名 说明: refWindow 表示 窗口 对 象 的 引用 ， 我 们 要 把 消息 传递 到 该 窗口 中 ; message 表示 


发 送 的 消息 ， 可 以 是 一 般 的 文本 ， 也 可 以 是 转化 成 文本 的 对 象 ; targetOrigin 表示 
接收 消息 窗口 所 属 的 源 的 URL， 例 如 http://localhost:8000/。 
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为 了 使 接收 消息 的 窗口 能 够 接收 到 消息 ， 还 需要 给 该 窗口 增加 message 事件 ， 以 监听 
其 他 窗口 发 送 过 来 的 消息 。 使 用 方法 如 下 : 


window.addEventListener ("message", messageListener, false); 
function messageListener (e){ 

console.log(e.origin); 

console.log(e.data); 

console.log(e.source); 


H 


且说 明 : message 为 事件 名 称 ， 触 发 该 事件 后 ， 会 调用 一 个 回调 函数 messageListener， 以 
处 理 接收 过 来 的 消息 。 消 息 事 件 包 含 一 个 消息 来 源 ( origin )、 发 送 的 数据 ( data ) 
和 源 窗 体 对 象 实例 (resorce )。 我 们 可 以 通过 源 信息 ， 判 断 消 息 来 源 是 否 合法 。 


在 此 之 前 ， 网 页 之 间 的 通信 会 通过 脚本 直接 调用 实现 ， 即 一 个 运行 的 页 面 会 尝试 调用 
另 一 个 页 面 的 数据 。 但 是 如 果 页 面 来 源 于 不 同 的 站 点 ， 会 受到 浏览 器 同 源 策 略 的 限制 。 由 
于 postMessage 接口 在 同 源 页 面 和 跨 源 页 面 中 都 可 以 使 用 ， 建 议 使 用 该 接口 实现 跨 文 档 的 
通信 ， 以 避免 直接 调用 产生 的 不 一 致 性 。 


14.1.2 ”Web 源 安全 


Web 的 源 安全 是 Web 应 用 的 基础 安全 ， 浏 览 器 基本 都 遵守 同 源 策略 。HTML 5 打破 了 
这 种 同 源 策略 限制 ， 在 使 用 跨 文档 消息 通信 时 ， 必 要 的 安全 意识 一 定 要 谨 记 。 


1. 同 源 策略 


由 于 Web 浏览 器 必须 遵守 同 源 策略 ， 因 此 客户 端的 Ajax 应 用 程序 一 般 不 能 与 第 三 方 
服务 器 通信 。 这 一 策略 规定 JavaScript 代码 只 能 访问 其 来 源 服务 器 上 的 数据 。 事 实 上， 这 
一 策略 是 非常 必要 的 。 

同 源 策 略 又 名 同 域 策略 ， 是 浏览 器 中 的 主要 安全 措施 。 这 里 的 “ 源 ” 指 的 是 主机 名 、 
协议 和 端口 号 的 组 合 ， 我 们 可 以 把 一 个 “ 源 ” 看 作 是 某 个 web 页 面 或 浏览 器 所 浏览 的 信息 
的 创建 者 。 同 源 策略 ， 简 单 地 说 就 是 要 求 动态 内 容 (如 JavaScript) 只 能 阅读 与 之 同 源 的 那 
些 HTTP 应 答 和 cookies， 而 不 能 阅读 来 自 不 同 源 的 内 容 。 

2. 跨 文 档 通信 安全 


一 般 情况 下 ， 我 们 会 通过 跨 源 通信 的 消息 事件 中 的 源 来 确定 消息 来 源 是 否 可 靠 。 同 时 
也 有 必要 增加 事件 监听 器 来 监听 不 可 信 的 干扰 消息 。 一 般 都 会 提供 一 份 白 名单 ， 以 协助 济 
览 器 做 安全 处 理 ， 即 对 比 消息 来 源 (origin〉 是 否 在 可 信赖 的 白 名 单 中 。 

另外 对 于 传递 过 来 的 消息 数据 ， 也 应 该 谨慎 使 用 ， 即 便 是 可 靠 的 消息 来 源 ， 也 应 该 像 
对 待 外 部 输入 时 一 样 慎重 。 首先 要 避免 传递 HTML 标签 数据 ， 因 为 不 恰当 的 标签 数据 可 能 
会 影响 页 面 的 布局 。 其 次 是 应 避免 使 用 eval0 方 法 来 处 理 传递 过 来 的 数据 ， 因 为 可 能 会 发 
生 不 可 预期 的 脚本 执行 ， 建 议 使 用 JSON 对 象 的 操作 。 

如 下 安全 示例 应 牢记 。 


ws 
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// 不 安全 : e.data 数据 如 果 包 含 HTML 标签 ， 可 能 会 造成 页 面 布局 发 生变 化 


element .innerHTML=e.data; 


// 比 较 安全 


element .textContent=e.data; 


/ /不安 全: e.data 数据 可 能 会 包含 一 些 不 可 预期 的 脚本 执行 
eval (e.data); 


// 比 较 安全 
JSON .parse (e.data) 


14.1.3 ”使 用 postMessage 接口 


本 节 将 详细 介绍 postMessage 接口 的 使 用 方法 及 相关 注意 事项 。 
1. 检测 浏览 器 支持 情况 
在 使 用 postMessage 接口 之 前 ， 按 照 惯例 ， 我 们 需要 检测 浏览 器 是 否 支 持 它 。 检 测 方 
法 如 下 : 
if(typeof window.postMessage === "undefined"){ 
alert ("您 的 浏览 器 不 支持 postMessage! "); 
2. 发 送 消息 


通过 调用 目标 页 面 的 window 对 象 中 的 postMessage0 函 数 ， 可 向 目标 页 面 发送 消 息 。 


targetWindow.postMessage ("Hello, world", "www.example.com"); 


全 说 明 : postMessage 的 第 一 个 参数 表示 发 送 的 数据 ， 第 二 个 参数 表示 消息 传送 的 目标 页 
面 的 域 (可 以 使 用 “*”， 表 示 对 于 消息 传送 的 目标 页 面 没 有 域 的 限制 )。 
例如 ， 发 送 消息 给 当前 页 面 中 的 ame， 可 以 在 相应 过 ame 的 contentWindow 中 调用 
postMessage() 方 法 : 


document .getElementsByTagName ("iframe") [0] .contentWindow.PostMessage ("H 
ello,world","*"); 


这 里 postMessage() 方 法 的 第 二 个 参数 为 “* ”， 表 示 不 对 目标 页 面 的 域 进 行 限制 。 
各 提示: 需要 特别 注意 的 是 ， 发 送 消息 的 window 对 象 是 目标 页 面 的 window 对 象 ， 而 不 
是 当前 页 面 的 window 对 象 。 
3. 监听 消息 事件 


监听 消息 事件 是 在 发 送 消息 的 目标 页 面 进 行 的 。 通 过 在 window 对 象 中 添加 message 
事件 ， 即 可 监听 发 送 过 来 的 消息 。 

【示例 14-1】 监听 消息 事件 并 检测 有 效 的 来 源 。 

// 添 加 白 名 单 


Var originWhiteList= ["http://portal .example.com", "http://games.example. 
com", "http://www.example.com"]; 
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// 检 测 来 源 
function checkWhiteList(origin) { 
for (var i=0; i<originWhiteList.length; i++) { 
if (origin === originWhiteList[i]) { 
return true; 
} 
} 


return false; 


} 
// 消 息 事 件 处 理 
function messageHandler(e) { 
if(checkWhiteList(e.origin)) { 
//processMessage (e.data); 
} else { 
// 忽 略 未 确认 的 消息 来 源 
} 
| 
// 添 加 消息 事件 监听 器 


window.addEventListener ("message", messageHandler, true); 
代码 分 析 : 在 示例 14-1 中 ， 首 先 设 置 了 白 名 单 ， 在 接收 消息 的 时 候 ， 只 接收 列 入 白 名 
单 的 域 发 来 的 消息 。checkWhiteList0) 是 针对 消息 来 源 进行 检测 是 否 列 入 白 名 单 。 最 重要 的 
是 添加 了 消息 事件 监听 器 message， 并 把 消息 交 给 messageHandler0 函 数 来 处 理 。 函 数 
messageHandler() 的 参数 。 为 消息 事件 MessageEvent， 通 过 该 消息 事件 ， 可 以 访问 消息 来 源 
Corigin)、 发 送 的 数据 〈data) 和 源 窗 体 对 象 实例 〈resorce) 等 信息 。 
全 提示 : 在 部 署 跨 文档 消息 传输 的 时 候 ， 监 听 消息 的 页 面 和 发 送 消息 的 页 面 应 从 属于 不 同 
的 域名 ， 然 后 再 建立 两 个 页 面 的 关联 ( 如 通过 ifiame 或 弹出 页 面 等 方式 )， 以 方 
便 这 两 个 网 页 获取 到 对 方 的 窗口 代理 ， 最 终 实现 信息 交换 。 


14.1.4 消息 事件 接口 MessageEvent 


在 上 一 节 中 , 我 们 介绍 了 如 何 使 用 消息 事件 来 获取 消息 数据 , 并 用 于 检测 来 源 的 安全 。 
HTML 5 提供 了 消息 事件 接口 MessageEvent， 用 于 通信 过 程 中 的 消息 处 理 。 


1. 接口 清单 


【示例 14-2】 MessageEvent 接口 清单 。 


interface MessageEvent : Event { 

readonly attribute any data; 

readonly attribute DOMString origin; 

readonly attribute DOMString lastEventId; 

readonly attribute WindowProxy source; 

readonly attribute MessagePortArray ports; 

void initMessageEvent (in DOMString typeArg, in boolean canBubbleArg, in 

boolean cancelableArg, 
in any dataArg, in DOMString or iginArg, in DOMString lastEventIdArg, 
in WindowProxy sourceArg, in MessagePortArray portsArg); 


ks 
2. 接口 属性 
消息 事件 接口 MessageEvent 的 属性 均 为 只 读 属性 。 


ss 
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口 data: 数据 属性 

获取 消息 中 的 数据 。 

口 origin: 来 源 属性 

获取 消息 的 来 源 。 应 用 于 服务 器 发 送 的 事件 和 跨 文档 消息 传输 。 消 息 的 来 源 通常 是 一 
种 格式 ， 包 含 了 主机 名 和 端口 号 。 但 不 是 文档 来 源 的 路 径 或 其 他 不 完整 的 片段 标识 。 

口 lastEventId: 最 后 事件 的 编号 

获取 最 后 一 个 事件 的 ID 编号 。 应 用 于 服务 器 发 送 事件 ， 表 示 最 后 一 个 事件 的 事件 源 


取 源 窗口 的 代理 。 应 用 于 跨 文 档 消 息 传输 。 
ports: 端口 属性 
区 消息 的 端口 数组 。 常 用 于 跨 文档 消息 传输 和 消息 通道 。 


3. 接口 方法 initMessageEvent() 


D 编号 。 
口 source: 源 代理 属性 
获 
图 | 
获 


消息 事件 接口 MessageEvent 有 一 个 方法 initMessageEvent()。 
initMessageEvent() 方 法 是 以 一 定 的 方式 ， 初 始 化 为 同样 名 称 的 DOM 事件 接口 方法 。 


4. MessageEvent 接 口 说 明 


HTML 5 定义 的 MessageEvent 接口 也 是 WebSockets 和 Workers 的 一 部 分 。 HTML 5 的 
通信 功能 中 ， 用 于 接收 消息 的 API 与 MessageEvent 接口 是 一 致 的 。 

在 本 章 的 跨 文档 消息 传输 的 应 用 中 ,一 般 会 用 到 MessageEvent 接口 的 data 属性 、origin 
属性 、source 属性 和 ports 属性 。 其 他 属性 和 方法 会 在 后 面 的 章节 中 涉及 ， 由 于 它们 同属 于 
同一 个 接口 ， 因 此 这 里 一 并 列 出 。 


14.1.5 ”实验 室 : 跨 文 档 消息 传输 示例 


本 节 将 创建 一 个 跨 文档 的 消息 传输 示例 ， 利 用 postMessage0 方 法 在 不 同文 档 之 间 传 输 
消息 。 本 节 要 介绍 的 案例 是 把 两 个 跨 文档 的 页 面 中 的 数据 一 起 计算 ， 并 反馈 计算 结果 。 


1.， 案例 简介 


该 案例 包含 两 个 相互 传送 消息 的 主体 页 面 和 框架 页 面 。 其 中 主体 页 面 main.html 包含 
一 个 表单 输入 和 一 个 “计算 ”按钮 ;框架 页 面 frame.html 包含 一 个 输入 表单 和 一 段 文字 
说 明 。 

主体 页 面 mainhtml 的 域 为 “http://yxw740:8081”; 框架 页 面 frame.html 的 域 为 
“http://yang:8081”。 框架 页 frame.html 通过 iframe 标签 嵌 在 主体 页 面 main.html 中 。 我们 要 
实现 的 是 让 这 两 个 页 面 通信 。 

单 击 主体 页 面 的 “计算 ”按钮 ， 页 面 会 把 输入 的 表单 数据 传送 到 框架 页 面 中 ， 并 与 框 
架 页 面 的 表单 数据 进行 乘法 运算 。 最 后 ， 框 架 页 面 会 把 计算 结果 返回 到 主体 页 面 中 。 主 体 
页 面 接收 到 回 传 的 计算 结果 ， 会 把 它 在 相应 的 位 置 显示 出 来 。 页 面 结构 如 图 14-2 所 示 。 
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主体 页 面 
< © | © ymw740:8081/Chapterlt/main .html 安 


计算 本 页 面 输 入 的 数字 与 子 框架 页 输入 的 数字 的 乘积 
-计算 | 
计算 结果 : 27 


所 一 一 一 一 一 


本 页 面 会 做 如 下 操作 : 
接收 的 数字 9 * 页 面 表单 的 数字 3 = 计算 结果 27 
返回 计算 结果 。 


图 14-2 ”路 文档 消息 示例 
下 面 就 逐步 实现 所 描述 的 案例 。 
2. 服务 器 部 署 


为 了 提供 不 同 的 域名 ， 我 们 需要 部 署 两 个 站 点 ， 分 别 为 http://yxw740:8081 和 
http://yang:8081。 在 这 里 ， 我 们 使 用 更 加 便捷 的 方法 。 

更 新 Windows 系统 的 hosts 文件 (位 于 C:\WINDOWS'\system32\drivers\etc\hosts) 或 
Linux 系统 的 hosts 文件 (位 于 /etc/hosts)， 增 加 两 条 指向 127.0.0.1 的 记录 ， 如 下 所 示 : 

T2080 yxw740 

127:0.0.1 yang 

这 样 即 可 以 不 同 的 名 称 去 访问 同一 个 目录 下 的 文件 ， 表 现 出 来 的 是 不 同 的 域 ， 相 互 之 
间 不 能 直接 调用 脚本 。 

我 们 选择 主体 页 面 使 用 域 “http://yxw740:8081” 框架 页 面 使 用 域 “http://yang:8081”。 
这 一 点 在 后 面 的 代码 中 会 有 所 体现 。 


3. 主体 页 面 的 内 容 设 计 


主体 页 面 main.html 包含 一 个 文本 输入 框 、 一 个 “计算 ”按钮 和 一 个 iframe 框架 ， 其 
中 该 框架 页 地 址 指向 http://yang:8081/Chapter14/frame.html。 

主体 页 面 main.html 的 运行 地 址 为 http://yxw740:8081/Chapter14/main.html。 

【示例 14-3】 主体 页 面 设计 (main.html)。 

<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="uft-8" /> 


<title> 主 体 页 面 </title> 
<style type="text/css"> 
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/* 样式 表 省 略 */ 
</style> 
</head> 
<body> 
<h1> 计 算 本 页 面 输入 的 数字 与 子 框架 页 输入 的 数字 的 乘积 </h1> 
<p> 
<input type="text" id="msg" name="msg" Value="" placeholder=" 请 输入 数 
这 
<input type="button" id="button" name="button" value=" 讲 息 ™ 
onclick="sendToFrame()" /> 


</p> 

<p> 计 算 结 果 : <span id="result"></span></p> 

<iframe width="100%" src="http://yang:8081/Chapterl4/frame.html" 
height="140"></iframe> 

</body> 

</html> 


4. 主体 页 面 的 脚本 设计 


现在 ,在 主体 页 面 main.html 中 添加 脚本 实现 ， 需 要 实现 发 送 消息 和 接收 消息 的 功能 。 

口 添加 向 框架 页 面 发 送 消 息 的 函数 sndToFrame0， 并 绑 定 在 “计算 ”按钮 的 onclick 
事件 上 。 

口 指定 合法 的 消息 来 源 ， 即 定义 了 originWhite。 

口 添加 消息 事件 回调 函数 messageMainHandler(e)， 用 于 mssage 事件 回调 ， 处 理 框 架 
页 面 发 来 的 消息 。 

口 在 window.onload 事件 中 ， 添 加 浏览 器 支持 检测 。 如 果 浏 览 器 支持 postMesage() 方 
法 ， 则 添加 message 监听 事件 。 

<script type="text/javascript"> 

/* 发 送 消 息 到 框架 页 面 */ 

function sendToFrame (){ 
var win = document.getElementsByTagName ("iframe") [0] .contentWindow; 

/* 获取 iframe 的 窗 体 对 象 */ 
Var val = document .getElementById ("msg") .value; 
win.postMessage (val,"#"):  /* 使 用 iframe 窗 体 对 象 发 送 消息 给 框架 页 面 */ 

} 

var originWhite = "http://yang:8081"; /* 指定 合法 的 消息 来 源 */ 

/* 消息 事件 回调 函数 */ 


function messageMainHandler (e){ 


if(e.origin==originWhite){ /* 验证 消息 来 源 */ 
document .getElementById ("result") .textContent = e.data; 
}elsef{ 


console .1og ("非法 的 消息 来 源 ! ")， 
} 


} 
/* 页 面 加 载 处 理 */ 
window.onload=function(){ 
/* 检测 浏览 器 支持 情况 */ 
if(typeof window.postMessage 一 = "undefined"){ 
document .getElementById ("button") .onclick=function(){ 
return false; 


人 
console .1og ("您 的 浏览 器 不 支持 postMesage! "); 
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}elsef{ 
window.addEventListener ("message", messageMainHandler, true); /* 


添加 监听 事件 message */ 
} 


</script> 


5. 框架 页 面 的 内 容 设计 


框架 页 面 的 内 容 比 较 简 单 ， 只 有 一 个 输入 框 。 输 入 的 内 容 会 与 主体 页 面 发 来 的 消息 数 
据 进行 乘法 运算 。 
【示例 14-3】 框架 页 面 设计 (frame.html)。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="uft-8" /> 
<title> 框 架 页 面 </title> 
<style type="text/css"> 
/* 样式 表 省 略 */ 
</style> 
</head> 
<body> 
<p> 
<input id="name" name="name" type="text" /> 
</p> 
<p> 本 页 面 会 做 如 下 操作 : <br> 
接收 的 数字 <span id="getData"></span> * 页 面 表单 的 数字 <span id="inputData"> 
</span> 
= 计算 结果 <span id="result"></span><br> 
返回 计算 结果 。</p> 
</body> 
</html> 


6. 框架 页 面 的 脚本 设计 


人 


FE 框 架 页 面 frame.html 中 添加 脚本 实现 ， 也 需要 实现 发 送 消息 和 接收 消息 的 功能 。 

指定 合法 的 消息 来 源 ， 即 定义 了 originWhite。 

添加 消息 事件 回调 函数 messageFrameHandler (e)， 用 于 mssage 事件 回调 ， 处 理 主 

体 页 面 发 来 的 消息 。 

口 添加 数据 处 理 函数 sendToMain0。 该 函数 会 产生 计算 结果 ， 并 把 结果 发 送 给 主体 
页 面 。 

口 在 window.onload 事件 中 ， 添 加 浏览 器 支持 检测 。 如 果 浏 览 器 支持 postMesage() 方 
法 ， 则 添加 message 监听 事件 。 

<script type="text/javascript"> 

var originWhite = "http://yxw740:8081"; /* 指定 合法 的 消息 来 源 */ 

/* 消息 事件 回调 函数 */ 


function messageFrameHandler (e){ 


if(e.origin==originWhite){ /* 验证 消息 来 源 */ 
sendToMain(e.source.window,e.data); /* 调用 数据 处 理 函 数 sendTo- 
Main() */ 
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}elsef{ 
console .1og ("非法 的 消息 来 源 ! ") ; 
} 
| 
/* 数据 处 理 */ 
function sendToMain (win,edata){ 
Var val = parseInt (document .getElementById ("name") .value); 
var data= parseInt (edata); 


var result = val * data; /* 计算 结果 */ 
win.postMessage (result, "*"); /* 将 计算 结果 回 发 数据 给 消息 的 来 源 窗口 


*/ 
document .getElementById ("getData") .textContent = data; 
document .getElementById ("inputData") .textContent = val; 
document .getElementById ("result") .textContent = result; 

有 

/* 页 面 加 载 处 理 */ 

window.onload=function(){ 


/* 检测 浏览 器 支持 情况 */ 


if(typeof window.postMessage === "undefined"){ 
console .10g ("您 的 浏览 器 不 支持 postMesage! "); 
}elsef{ 


window.addEventListener ("message", messageFrameHandler, true); /* 


添加 监听 事件 message */ 
} 


} 
</script> 


至 此 ， 己 经 可 以 实现 跨 文档 消息 传输 了 。 打 开 浏 览 器 ， 输 入 http://yxw740:8081/ 
Chapter14/main.html, 在 打开 的 主体 页 面 中 , 输入 数字 9, 在 框架 页 面 输入 数字 3, 单 击 “ 计 
算 ” 按 钮 ， 运 行 结果 如 图 14-2 所 示 。 


14.2 跨 源 1 


XmlHttpRequest 对 象 实现 了 Ajax 的 Web 应 用 程序 的 关键 功能 ， 提 供 了 对 HTTP 协议 
的 完全 的 访问 ， 包 括 发 起 POST 和 HEAD 请 求 以 及 普通 的 GET 请 求 的 能 力 ， 可 以 同步 或 
异步 返回 Web 服务 器 的 响应 ， 并 且 能 以 文本 或 者 一 个 DOM 文档 形式 返回 内 容 。 

XMLHttpRequestLevel 2 是 XmlHttpRequest 的 增强 版 ， 添加 了 一 些 与 时 俱 进 的 新 功能 ， 
如 跨 站 点 的 请 求 、 进 度 事 件 、 处 理发 送 和 接收 字 节 流 等 。 本 节 将 详细 讲解 
XMLHttpRequest Level 2 的 新 增 功 能 。 


14.2.1 改进 的 XmlHttpRequest 对 象 

XMLHttpRequest Level 2 仅仅 是 描述 XmlHttpRequest 对 象 的 一 个 规范 说 明 。 在 这 个 规 
范 当 中 ， 描 述 了 从 属于 该 规范 的 XmlHttpRequest 对 象 应 该 具有 的 功能 。 

1.， 跨 源 请 求 

在 过 去 的 XmlHttpRequest 对 象 中 , 仅 限 于 与 同 源 的 服务 器 通信 .XMLHttpRequest Level 


.324 
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2 允许 通过 跨 源 资源 共享 (Cross-Origin Resource Sharing，CORS ) 进行 跨 站 点 的 
XMLHttpRequest 请 求 。 
如 图 14-3 所 示 的 跨 源 请 求 服 务 器 示意 图 ， 页 面 a 属于 服务 器 A。 如 果 需 要 请 求 服务 器 
B， 页 面 a 和 服务 器 B 之 间 的 消息 通信 就 是 本 节 讲 的 跨 源 请 求 。 
使 用 跨 源 的 XMLHttpRequest 请 求 ， 使 得 浏览 
器 中 的 页 面 可 以 访问 不 同 的 服务 器 资源 , 这 为 构建 “ 
非 同 源 服务 的 Web 应 用 程序 提供 了 良好 的 解决 方 ”| | 页 面 a 


案 。 如 网 站 中 的 天 气 预 报 、 股 票 信息 、 实 时 汇率 等 Pe 

功能 , 由 于 自己 的 服务 器 无 法 直接 提供 如 此 专业 的 | i 

服务 ,最 好 的 解决 方案 就 是 去 专门 提供 这 些 服务 的 下 

服务 器 请 求 资源 。 | | 由 
另外 ， 随 着 互联 网 的 服务 越 来 越 精细 化 ， 把 各 。 服务 器 B 


种 服务 分 别 部 署 在 不 同 的 服务 器 上 ,不 但 可 以 提供 。 图 14.3 路 源 请 求 服务 器 示意 图 
专业 化 的 服务 ， 而 且 便于 管理 、 维 护 和 扩展 。 用 户 
可 以 通过 浏览 器 的 XMLHttpRequest 跨 源 请 求 ， 直 接 访问 不 同 服务 器 的 资源 。 


2. 进度 事件 


XMLHttpRequest Level 2 为 XMLHttpRequest 对 象 新 增 了 对 进度 的 一 系列 响应 事件 ,之 
前 的 版 本 中 只 有 一 个 相应 响应 的 事件 onreadystatechange， 难 以 为 用 户 提 供 准 确 的 进度 提示 
服务 。 

利用 一 系列 新 的 进度 事件 ， 不 但 可 以 获取 详细 的 请 求 进度 信息 ， 还 可 以 跟踪 资源 上 载 
的 进度 信息 ， 使 得 XMLHttpRequest 对 象 请 求 资源 更 加 细致 化 。 


3.， 其 他 功能 

XMLHttpRequest Level 2 的 其 他 新 增 的 XMLHttpRequest 对 象 功能 还 包括 处 理发 送 和 
接收 字 节 流 等 功能 ， 本 书 不 做 详细 介绍 。 
14.2.2 XMLHttpRequestLevel 2 规范 说 明 


为 使 我 们 对 XMLHttpRequestLevel 2 规范 下 的 XMLHttpRequest 对 象 有 更 深入 的 了 解 ， 
本 节 将 介绍 该 规范 涉及 的 具体 内 容 。 由 于 会 兼容 前 期 的 版 本 ， 因 此 很 多 原 有 的 功能 也 保留 
了 下 来 。 


1. XMLHttpRequest Level 2 接口 清单 


XMLHttpRequestLevel 2 包含 了 两 个 主要 的 接口 ， 清 单 如 下 。 
【示例 14-4】 XMLHttpRequestEventTarsget 接口 清单 。 


interface XMLHttpRequestEventTarget : EventTarget { 
// 事 件 句柄 〈 处 理 程序 ) 属性 


attribute EventListener onabort; 
attribute EventListener onerror; 
attribute EventListener onload; 
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attribute EventListener onloadstart; 
attribute EventListener onprogress; 


> 
【示例 14-5】 XMLHttpRequest 接口 清单 。 


[Constructor] interface XMLHttpRequest : XMLHttpRequestEventTarget { 

// 事 件 句柄 〈 处 理 程序 ) 属性 

attribute EventListener onreadystatechange; 

// 就 绪 状态 

const unsigned short UNSENT = 0; 

const unsigned short OPENED = 1; 

const unsigned short HEADERS RECEIVED = 2; 

const unsigned short LOADING = 3; 

const unsigned short DONE = 4; 

readonly attribute unsigned short readyState; 

// 请 求 元 数据 

attribute boolean withCredentials; 

void open(in DOMString method, in DOMString url); 

void open(in DOMString method, in DOMString url, in boolean async); 

void open (in DOMString method, in DOMString url, in boolean async, 
[Null=Null, Undefined=Null] in DOMString user); 

void open(in DOMString method, in DOMString url, in boolean async, 
[Null=Null, Undefined=Null] in DOMString user, [Null=Null, 
Undefined=Null] in DOMString password); 

void setRequestHeader (in DOMString header, in DOMString value); 

// 请 求 

readonly attribute XMLHttpRequestUpload upload; 

void send(); 

void send(in ByteArray data); 

void send([Null=Null, Undefined=Null] in DOMString data); 

void send(in Document data); 

void abort(); 

// 响 应 元 数据 

DOMString getAllResponseHeaders (); 

DOMString getResponseHeader (in DOMString header); 

readonly attribute unsigned short status; 

readonly attribute DOMString statusText; 

// 响 应 内 容 体 

void overrideMimeType (mime); 

readonly attribute ByteArray responseBody; 

readonly attribute DOMString responseText; 

readonly attribute Document responseXML; 

}; 


在 上 述 的 两 个 接口 清单 中 , XMLHttpRequestEventTarget 接口 中 仅 包 含 一 系列 的 响应 事 
件 ， 而 常用 的 XMLHttpRequest 是 继承 XMLHttpRequestEventTarget 接口 的 。 

通过 接口 清单 ,我 们 可 以 对 XMLHttpRequest 对 象 有 一 个 全 新 的 了 解 ， 由 于 篇 幅 所 限 ， 
这 里 不 再 对 各 个 属性 和 方法 做 具体 的 说 明 。 

另外 XMLHttpRequestLevel 2 还 提供 了 未 完善 的 接口 XMLHttpRequestUpload， 也 继承 
了 响应 事件 的 接口 XMLHttpRequestEventTarget， 如 下 所 示 : 


interface XMLHttpRequestUpload : XMLHttpRequestEventTarget { 


// 供 未 来 使 用 
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2. 新 的 响应 事件 


XMLHttpRequestLevel 2 完善 了 事件 接口 XMLHttpRequestEventTarget。 其 中 包括 以 下 
监听 事件 。 
口 abort 
当 请 求 中 断 时 的 事件 处 理 句 柄 。 如 调用 了 abort() 方 法 。 
口 error 
当 请 求 失败 时 的 事件 处 理 句柄 。 
口 load 
当成 功 完成 请 求 时 的 事件 处 理 句 柄 。 
口 loadstart 
当 请 求 开始 时 的 事件 处 理 句柄 。 
口 progress 
当 正 在 加 载 数据 或 发 送 数据 时 的 事件 处 理 句 柄 。 


14.2.3 ”使 用 新 的 XMLHttpRequest 对 象 


本 节 将 介绍 一 下 如 何 使 用 新 的 XMLHttpRequest 对 象 。 
1. 检测 浏览 器 支持 情况 


如 果 需 要 使 用 XMLHttpRequestLevel 2 下 的 新 的 XMLHttpRequest 对 象 功能 , 如 跨 源 请 
求 ， 则 需要 检测 当前 的 浏览 器 是 否 支持 该 功能 。 常 用 的 方法 是 检测 XMLHttpRequest 对 象 
是 否 存在 withCredentials 属性 。 如 下 所 示 : 


Var xmlHttp= new XMLHttpRequest (); 

if(typeof xmlHttp.withCredentials==="undefined"){ 
alert ("你 的 浏览 器 不 支持 跨 源 请 求 ") ; 

}elsef 
alert ("你 的 浏览 器 支持 跨 源 请 求 ") ; 

上 


2. 构建 跨 源 请 求 


构建 跨 源 请 求 与 构建 同 源 的 服务 器 请 求 在 实现 方面 基本 上 类 似 ， 只 需要 指定 一 个 不 是 
同 源 的 请 求 地 址 即 可 。 代 码 如 下 : 


xmlHttp.open ("GET" ,"http://yang:8081/Chapter14/cors .html" ,true) : 
xmlHttp.send (null); 


关于 跨 源 请 求 的 实现 ， 没 有 技术 上 的 难点 ， 只 有 实现 上 的 不 同 。 

3. 添加 监听 事件 

在 跨 源 请 求 发 出 之 前 ， 通 过 添加 XMLHttpRequest 对 象 的 监听 事件 ， 可 以 跟踪 请 求 的 
执行 过 程 。 
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【示例 14-6】 添加 XMLHttpRequest 对 象 的 监听 事件 。 


xmlHttp.onabort=function(e){ 


console.1og ("请 求 中 断 "); 
上 


xmlHttp.onerror=function(e){ 


console.1og ("请 求 失败 ") ; 
} 
xmlHttp.onload=function (e){ 


console .1og ("请 求 完成 ， 输 出 请 求 内 容 : ") ; 


console.1log (xmlHttp.responseText); 


} 
xmlHttp.onloadstart=function(e){ 


console .1og ("请 求 开 始 ") ; 
} 


xmlHttp.onprogress=function(e){ 
console.1og ("请 求 中 ..."); 
if(e.lengthComputable){ 
console.log(e.loaded+ "/"+te.total); 
} 


与 之 前 常用 的 onreadystatechange 事件 相 比 , 新 增 的 事件 可 以 更 详细 地 跟踪 请 求 的 整个 
过 程 。 其 中 通过 使 用 onprogress 事件 ， 可 以 完成 实时 的 进度 信息 ， 而 这 一 功能 在 之 前 是 无 
法 做 到 的 。 

所 有 事件 的 回调 函数 ， 都 可 以 获取 到 XMLHttpRequestProgressEvent 对 象 ， 这 是 一 个 
进度 对 象 ， 其 中 的 信息 记录 了 等 待 发 送 数据 的 总 量 、 已 发 送 数据 的 总 量 ， 以 及 数据 总 量 是 
和 否 已 知 的 等 。 

XMLHttpRequestupload 对 象 也 包含 上 述 事件 ， 以 及 XMLHttpRequestProgressEvent 
对 象 。 

xmlHttp .upload.onprogress=function(e) { 

console.1og ("上 载 中 ..."); 
if(e.lengthComputable){ 
console.log(e.loaded+ "/"+e-total) 


| 
上 


4. 服务 器 部 署 


要 完成 跨 源 的 请 求 ， 需 要 依赖 两 个 条 件 ， 首先 ， 使 用 XMLHttpRequest 对 象 访问 的 页 
面 与 当前 页 面 是 不 能 同 域 的 ， 其 次 ， 请 求 的 目标 服务 器 能 够 解析 跨 源 的 XMLHttpRequest 
对 象 请 求 。 所 以 ， 我 们 需要 对 服务 器 做 一 些 相 关 的 配置 部 署 。 

(1) 在 ITS6 中 暴露 Access-Control-Allow-Origin， 可 通过 以 下 步骤 : 

单 击 需 要 启用 CORS 的 站 点 的 属性 ， 在 “HTTP 头 ” 标 签 下 的 自 定 义 Http 头 部 分 ， 添 
加 如 下 信息 即 可 : 


自 定义 HTTP 头 名 : Access-Control-Allow-Origin 
自 定义 HTTP 头 值 : * 


(2) 在 IS7 中 可 以 复制 以 下 代码 到 你 的 站 点 或 应 用 程序 根 目录 下 的 web.config 文件 中 : 
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<?xml version="1.0" encoding="utf-8"?> 
<configuration> 
<system.webServer> 
<httpProtocol> 
<customHeaders> 
<add name="Access-Control-Allow-Origin" value="*" /> 
</customHeaders> 
</httpProtocol> 
</system.webServer> 
</configuration> 


5. HTTP 头 


HTTP (HyperTextTransferProtocol) 是 超 文本 传输 协议 的 缩写 ， 它 用 于 传送 WWW 方 
式 的 数据 。HTTP 协议 采用 了 请 求 /响应 模型 。 客 户 端 向 服务 器 发 送 一 个 请 求 ， 请 求 头 包含 
请 求 的 方法 、URI、 协 议 版 本 ， 以 及 包含 请 求 修 饰 符 、 客 户 信息 和 内 容 的 类 似 于 MIME 的 
消息 结构 。 

HTTP 头 部 消息 通常 包括 客户 机 向 服务 器 的 请 求 消息 和 服务 器 向 客户 机 的 响应 消息 。 
以 下 是 执行 一 个 跨 源 请 求 的 HTTP 头 部 示例 。 

【示例 14-7】 跨 源 的 请 求 头 部 示例 。 


GET /Chapterl4/cors.aspx HTTP/1.1 

Host: yang:8081 

User-Agent: Mozilla/5.0 (Windows NT 5.2) AppleWebKit/535.2 (KHTML, like 
Gecko) Chrome/15.0.874.121 Safari/535.2 

Accept: */* 

Connection: keep-alive 

Cache-Control: max-age=0 

Origin: http://yxw740:8081 

Referer: http://Yxw740:8081/Chapter14/Code14-Test.html 
Accept-Encoding: gzip,deflate, sdch 

Accept-Language: zh-CN,zh;q=0.8 

Accept-Charset: GBK,utf-8;q=0.7,*;q=0.3 


【示例 14-8】 跨 源 的 响应 头 部 示例 。 


HTTP/1.1 200 OK 

Date: Fri, 23 Dec 2011 01:41:25 GMT 

Server: Microsoft-IIS/6.0 

X-Powered-By: ASP.NET 
Access-Control-Allow-Origin: http://yxw740:8081 
Access-Control-Allow-Credentials: true 
X-AspNet-Version: 2.0.50727 

Cache-Control: private 

Content-Type: text/html; 

charset=utf-8 Content-Length: 12 


跨 源 请 求 的 头 部 信息 会 包含 Origin 和 Referer 信息 ， 浏 览 器 会 帮助 完成 。 而 响应 的 头 
部 信息 中 的 Access-Control-Allow-Origin 信息 ， 则 是 在 服务 器 部 署 的 。 


14.2.4 ”实验 室 : 跨 源 请 求 示例 


本 节 将 利用 XMLHttpRequest 对 象 的 新 增 功能 来 实现 跨 源 的 请 求 。 
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1 案例 简介 

本 节 介 绍 的 案例 中 的 页 面 ， 包 含 一 个 按钮 和 用 于 记录 响应 信息 和 进度 状态 的 区 域 。 通 
过 单 击 按钮 事件 触发 一 个 跨 源 的 请 求 ， 请 求 的 结果 将 显示 在 响应 信息 区 域 ， 请 求 过 程 中 的 
态 则 在 进度 状态 的 区 域 显 示 。 成 功 执行 跨 源 请 求 的 页 面 效 果 如 图 14-4 所 示 。 


芝 


O 路 源 清 求 
€ 3 CC @yxw740:5081/cha 


请 求 资源 


响应 信息 : 
Hello World! 


进度 状态 : 
预备 
请 求 开始 
请 求 中 . . . 
请 求 完成 . 


图 14-4 成 功 的 跨 源 请 求 示 例 


全 提示 : 本 案例 跨 源 请 求 的 文件 仅仅 反馈 一 个 字符 囊 “Hello World! ”， 所 以 不 再 对 其 进行 
设计 ; 而 响应 跨 源 请 求 的 服务 器 ， 认 为 已 经 配置 完整 。 


2. 界面 设计 


给 页 面 添加 一 个 按钮 作为 发 起 跨 源 请 求 的 起 点 , 并 添加 响应 信息 的 记录 区 域 。 绑 定 “ 请 
求 资源 ”按钮 onclick 事件 为 AjaxRequest0 函 数 。 本 文件 的 运行 域 为 “http://yxw740:8081”。 
【示例 14-9】 跨 源 请 求 示例 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="uft-8" /> 
<title> 跨 源 请 求 </title> 
<style type="text/css"> 
<!-- 省 略 样式 表 --> 
</style> 
</head> 
<body> 
<form name="forml" method="post" action=""> 
<input name="button" type="button"” value=" 请 求 资源 "onclick= 
"AjaxRequest()" /> 
<div class="pad10"> 响 应 信息 : 
<p id="response"></p> 
</div> 
<div id="progress" class="pad10"> 进 度 状态 : 
<p> 预 备 </p> 
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</div> 


</form> 
</body> 
</html> 


3. 设计 文件 脚本 

设计 AjaxRequest0 脚 本 函数 : 新 建 XMLHttpRequest 对 象 ， 并 检测 浏览 器 支持 性 ; 添 
加 新 增 的 所 有 事件 处 理 ， 以 跟踪 监视 跨 源 请 求 的 进度 信息 ， 发 起 跨 源 的 请 求 ， 请 求 地 址 为 
另 一 个 域 “http:/yang:8081” 下 的 文件 。SetProgress0 用 于 在 页 面 上 更 新 进度 信息 。 


<script type="text/javascript"> 
function AjaxRequest (){ 


; 


var xmlHttp = new XMLHttpRequest (); 
if(typeof xmlHttp.withCredentials==="undefined"){ 


alert (" 你 的 浏览 器 不 支持 跨 源 请 求 ") ; 


return; 


xmlHttp.onabort=function(e){ 


SetProgress (" 请 求 中 断 ") 


xmlHttp.onerror=function(e){ 


SetProgress ("请 求 失败 ") ; 


xmlHttp.onload=function (e){ 

SetProgress (" 请 求 完 成 .") ; 

var obj = document .getElementById("response") 
obj .innerText = xmlHttp.responseText; 


xmlHttp.onloadstart=function(e){ 
SetProgress ("请 求 开 始 "); 


xmlHttp.onprogress=function(e){ 
SetProgress ("请 求 中 ..."); 
} 
xmlHttp.open("get","http://yang:8081/Chapter14/cors.aspx" ,true); 
xmlHttp.send (null); 


function SetProgress (str){ 


} 


var obj = document .getElementById("progress"); 
var p = document .createElement ("p"); 
p.innerText = str; 

obj .appendChild(p); 


</script> 
完成 以 上 步骤 ， 就 已 经 可 以 实现 跨 源 的 请 求 了 。 打 开 浏 览 器 ， 输 入 该 文件 的 地 址 ， 在 
显示 的 界面 上 单 击 “ 请 求 资源 ”按钮 ， 运 行 结果 如 图 14-4 所 示 。 


章 主要 讲解 了 HTML 5 跨 源 通信 的 概念 ， 


14.3 小 结 


点 讲解 了 发 生 在 不 同 域 的 页 面 之 间 的 跨 


文档 消息 传输 ， 以 及 访问 其 他 服务 器 资源 的 跨 源 请 求 。 本 章 的 难点 在 于 跨 源 概念 的 理解 。 


过 
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对 于 跨 文档 消息 传输 中 的 消息 事件 接口 ， 本 章 仅 使 用 了 其 中 的 一 部 分 功能 ， 完 全 理解 是 比 
较 难 的 ， 对 于 增强 的 XMLHttpRequest 对 象 ， 在 进度 控制 方面 有 了 全 新 的 进度 事件 ， 要 实 
现 跨 源 请 求 ， 还 需要 对 相关 的 服务 器 做 一 些 必 要 的 配置 ， 这 些 对 于 前 端 人 员 来 也 是 难点 。 
但 是 掌握 这 些 对 于 前 端 开发 人 员 来 说 ， 也 意味 着 将 会 迎 来 新 的 机 遇 。 

下 一 章 将 介绍 HTML 5 的 Web Socket 双向 通信 。 


144 习 题 


【习题 1】 请 简要 说 明 一 下 跨 文档 消息 传输 是 如 何 实现 的 。 

【习题 2】 消息 事件 MessageEvent 中 ， 包 含 了 三 个 重要 的 属性 data、origin 和 source。 
请 说 明 三 个 属性 的 含义 。 

【习题 3】 在 HIML 5 中 ， 新 的 XMLHttpRequest 对 象 做 了 哪些 改进 ? 

【习题 4】 在 HTML 5 中 ， 新 的 XMLHttpRequest 对 象 有 哪些 进度 事件 ? 

【习题 5】 请 部 署 一 个 支持 跨 源 请 求 的 服务 器 ， 并 编写 一 个 跨 源 的 异步 请 求 的 应 用 。 
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在 传统 的 Web 应 用 程序 中 ,服务 器 无 法 主动 地 向 浏览 器 推送 数据 ,需要 浏览 器 先 发 出 
请 求 才 能 返回 数据 。 如 果 要 获取 实时 的 数据 ， 通 常会 使 用 轮 询 等 方式 不 断 地 请 求 服务 器 ， 
但 这 种 做 法 有 着 致命 的 缺陷 。 所 幸 的 是 ，HTIML 5 规范 提供 一 种 全 新 的 双 工 通信 模块 
一 一 WebSocket， 它 可 以 为 浏览 器 与 服务 器 之 间 提 供 一 个 全 双 工 的 通信 信道 ， 双 方 可 以 通 
过 这 个 信道 直接 向 对 方 实 时 地 发 送 数据 ， 而 不 需要 再 次 请 求 连接 。 本 章 将 详细 介绍 与 
WebSocket 相关 的 概念 、 基 本 原理 和 编程 接口 。 


15.1 WebSocket 概述 


下 面 简单 介绍 WebSocket 的 概念 及 面临 的 问题 等 相关 的 内 容 。 
15.1.1 WebSocket 简介 


WebSocket 是 一 种 基于 一 个 TCP 连接 全 双 工 的 通信 技术 ， 主 要 是 在 浏览 器 和 服务 器 之 
间 提 供 一 种 双向 通信 的 解决 方案 。 它 通过 简单 的 握手 协议 ， 建 立 一 个 长 连接 ， 然 后 按照 协 
议 的 规则 进行 数据 的 传输 。 
作为 HIML 5 的 新 特性 的 WebSocket 格 外 吸引 开发 人 员 的 注意 , 它 使 得 浏览 器 对 Socket 
的 支持 成 为 可 能 。Web 开发 人 员 也 可 以 基于 WebSocket 构建 一 个 实时 的 Web 应 用 程序 ， 也 
使 得 Web 应 用 功能 更 接近 于 桌面 应 用 。 

WebSocket 包含 两 个 方面 的 内 容 : 一 方面 是 WebSocket 协议 ， 主 要 是 用 于 在 浏览 器 与 
有 务 器 之 间 建 立 通信 ; 另 一 方面 是 浏览 器 中 的 WebSocket 编程 接口 , 用 于 网 页 的 JavaScript 
脚本 编程 。 

WebSocket 协议 可 以 使 用 任何 服务 端的 编程 语言 来 实现 。 只 有 浏览 器 和 服务 器 都 遵循 
了 同样 的 该 协议 ， 才 能 建立 起 TCP 连接 ， 才 可 以 有 后 续 的 通信 。 

WebSocket 编程 接口 主要 用 于 浏览 器 客户 端的 JavaScript 编程 开发 。 前 端 开发 人 员 可 以 
通过 该 接口 提供 的 一 些 操作 ， 访 问 提供 了 WebSocket 的 服务 器 ， 从 而 实现 与 服务 器 实时 的 
通信 。 关 于 WebSocket 编程 接口 ， 我 们 会 在 后 面 的 小 节 中 详细 讲解 。 


15.1.2 ”实时 Web 应 用 面临 的 问题 


在 WebSocket 之 前 ，Web 应 用 全 部 是 基于 HTTP 协议 的 。 浏 览 器 和 服务 器 之 问 的 通信 ， 
通常 是 浏览 器 向 服务 器 发 起 请 求 ， 然 后 服务 器 根据 收 到 的 请 求 信息 返回 相应 的 结果 。 而 在 
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实际 的 开发 中 , 为 了 能 够 及 时 获取 最 新 的 信息 , 开发 者 们 常常 会 试图 实现 实时 的 Web 应 用 。 
由 于 在 传统 的 Web 应 用 中 ， 服 务 器 不 会 主动 地 向 浏览 器 推送 信息 ， 所 以 如 何 保证 客户 端 和 
服务 器 端的 信息 同步 ， 对 开发 者 来 说 是 一 个 极 大 的 考验 。 

目前 ,所 有 的 实时 Web 应 用 的 实现 方式 都 是 一 些 折 中 的 方案 。 通常 的 做 法 就 是 使 用 轮 
询 (Polling)， 其 中 比较 著名 的 是 Comet。Comet 技术 有 两 种 实现 方式 : 一 种 是 长 轮 询 ， 另 
一 种 是 过 ame 流 。 

轮 询 是 最 早 的 一 种 实现 实时 Web 应 用 的 方案 。 浏 览 器 以 一 定 的 时 间 间 隔 向 服务 器 端 发 
出 请 求 ， 以 频繁 请 求 的 方式 来 保持 客户 端 和 服务 器 端的 同步 。 轮 询 的 最 大 问题 是 ， 对 于 更 
新 数据 时 间 间 隔 不 确定 的 服务 器 ， 会 产生 大 量 无 用 的 请 求 ， 不 但 浪费 网 络 带宽 ， 还 会 白白 
增加 服务 器 的 压力 ， 所 以 这 是 一 种 非常 低 效 的 实时 方案 。 

长 轮 询 ， 是 指 打 开 一 条 连接 以 后 保持 ， 等 待 服务 器 推送 来 数据 再 关闭 的 方式 。 长 轮 询 
是 对 轮 询 技 术 的 改进 和 提高 ， 大 幅度 地 减少 了 无 用 的 请 求 。 然 而 当 服 务 器 的 数据 更 新 比较 
频繁 时 ， 与 一 般 的 轮 询 相 比 ， 长 轮 询 并 没有 实质 的 性 能 改善 。 

iframe 流 ， 就 是 在 页 面 中 插入 一 个 隐藏 的 过 ame, 通过 其 属性 src 向 服务 器 发 出 一 个 完 
整 的 HTTP 请 求 。 服 务 器 收 到 请 求 后 会 打开 一 个 保持 连接 状态 的 响应 ， 这 个 连接 状态 会 一 
直 保 持 下 去 ， 永 不 过 期 ， 服 务 器 可 以 通过 这 个 连接 源源 不 断 地 向 浏览 器 发 送信 息 。 然 而 ， 
当面 对 很 多 这 样 的 长 连接 时 ， 对 服务 器 资源 是 一 个 极 大 的 考验 。 

综合 上 述 几 种 方案 ， 都 不 是 真正 的 实时 技术 ， 而 且 会 产生 大 量 的 HTTP 请 求 和 响应 ， 
其 中 的 网 络 开销 主要 是 额外 的 报头 数据 。 面 对 大 量 的 HTTP 请 求 ， 服 务 器 的 承受 能 力也 是 
一 个 极 大 的 考验 ， 随 着 访问 量 的 增加 ， 服 务 器 的 资源 开销 也 会 成 倍增 加 。 对 于 开发 人 员 来 
说 ， 编 程 实现 也 非常 复杂 ， 需 要 考虑 服务 器 的 承载 能 力 等 因素 。 


15.1.3 WebSocket 的 优势 


如 今 ， 面 对 实时 的 Web 应 用 ，WebSocket 提供 了 便捷 实现 方式 。 与 传统 的 轮 询 等 方式 
相 比 ， 使 用 新 的 WebSocket 有 着 非常 强大 且 无 法 超越 的 优势 。 

首先 ， 降 低 了 不 必要 的 网 络 开销 。 由 于 
每 次 发 送 HTTP 请 求 都 会 包含 大 约 800B 报 |” 要 
头 信息 (HTTP 头 ); 如 果 使 用 WebSocket | “ee 
构建 应 用 程序 ， 则 每 个 消息 都 是 一 个 | 
WebSocket 帧 ， 仅 有 2B 的 开销 。 随 着 访问 oe 
用 户 的 增加 ，WebSocket 网 络 开 销 的 优势 越 | 
来 越 明 显 。 如 图 15-1 所 示 , 分 别 是 一 千 (用 a0000) 
例 A)、 一 万 (用 例 B)、 十 万 (用例 C) 个 am 
客户 访问 量 ， 每 个 客户 轮 询 一 次 和 使 用 “| 上 上 一 一 国有- 
WebSocket 帧 消息 的 网 络 开 销 对 比 。 

其 次 ， 降 低 了 服务 器 的 压力 。 由 于 ”图 15-1 轮 询 和 WebSocket 实现 的 网 络 开销 对 比 
WebSocket 只 有 与 服务 器 建立 连接 的 时 候 发 送 一 次 请 求 , 之 后 的 消息 传递 不 需要 再 次 请 求 ， 
整个 过 程 中 ， 服 务 器 只 处 理 一 次 请 求 。 与 处 理 轮 询 方式 的 大 量 请 求 相 比 ， 服 务 器 的 压力 大 
幅度 降低 。 
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再 次 ， 信 息 反馈 更 加 及 时 。 一 旦 浏览 器 通过 WebSocket 与 服务 器 建立 连接 之 后 ， 双 方 
就 可 以 直接 相互 发 送 消息 。 与 使 用 HTTP 请 求 /响应 相 比 ， 省 去 了 不 必要 的 延 时 。 

另外 ， 穿 越 代 理 和 防火 墙 的 能 力 。 由 于 WebSocket 是 使 用 HTTP_ CONNECT 代理 协议 
的 ， 浏 览 器 向 服务 器 发 送 的 仍然 是 一 个 HTTP 请 求 ， 而 这 个 请 求 是 一 个 申请 协议 升级 的 
HTTP 请 求 ， 服 务 器 根据 这 个 与 浏览 器 建立 连接 ， 而 HTTP 协议 是 不 受 防 火 墙 限制 的 。 所 
以 ， 基 于 WebSocket 的 应 用 ， 通 常 具 有 超 强 的 环境 适应 能 力 。 

最 后 ， 开 发 简单 方便 。WebSocket 提供 的 编程 接口 避免 开发 人 员 与 复杂 的 协议 打交道 ， 
所 以 不 了 解 通信 协议 的 开发 者 ， 仍 然 可 以 开发 出 基于 WebSocket 的 Web 应 用 。 


15.2 ”WebSocket 协议 


本 节 介 绍 一 下 WebSocket 的 握手 协议 及 各 浏览 器 的 支持 情况 。 
15.2.1 WebSocket 握手 协议 


WebSocket 协议 实际 上 是 一 个 基于 TCP 的 协议 。WebSocket 协议 订立 了 HTTP 握手 的 
行为 来 将 已 经 存在 的 HTTP 连接 升级 为 WebSocket 连接 。WebSocket 没有 试图 在 HTTP 之 
上 模拟 server 推送 的 通道 ， 而 是 直接 在 TCP 之 上 定义 帧 协议 。 

下 面 介 绍 一 下 WebSocket 规范 。 这 个 规范 目前 还 没有 正式 形成 ， 尚 处 于 草案 阶段 ， 版 
本 更 新 也 比较 快 。 我 们 选择 draft-ietf-hybi-thewebsocketprotocol-10 版 本 来 描述 WebSocket 
协议 ， 因 为 在 最 新 版 本 的 Chrome 和 FireFox 浏览 器 中 都 支持 这 一 协议 。 

【示例 15-1】 WebSocket 握手 协议 。 

从 浏览 器 到 服务 器 

GET /chat HTTP/1.1 

Host: server.example.com 

Upgrade: websocket 

Connection: Upgrade 

Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25j2Q== 

Sec-WebSocket-Origin: http://example.com 


Sec-WebSocket-Protocol: chat, superchat 
Sec-WebSocket-Version: 8 


从 服务 器 到 浏览 器 

HTTP/1.1 101 Switching Protocols 

Upgrade: websocket 

Connection: Upgrade 

Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+x0o= 
Sec-WebSocket-Protocol: chat 


这 是 一 个 典型 的 发 起 请 求 并 得 到 响应 的 例子 。 首 先 从 浏览 器 向 服务 器 发 送 的 HITP 协 
议 头 中 ,包含 的 “Upgrade: websocket” 表 示 连 接 协议 升级 到 WebSocket 协议 ， 其 他 内 容 就 
是 WebSocket 协议 所 需要 的 相关 握手 信息 。 服 务 器 解析 这 些 协议 ， 并 返回 一 个 密 钥 给 浏览 
器 ， 表 明 同 意 建立 WebSocket 连接 。 

一 旦 连接 建立 成 功 ， 浏 览 器 和 服务 器 就 可 以 基于 双 工 通信 信道 相互 传递 WebSocket 帧 
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消息 。 在 网 络 中 ， 每 个 帧 消息 都 以 0x00 开头 ， 以 0xFF 结尾 ， 中 间 采 用 UFT-8 编码 格式 。 
关于 上 述 的 WebSocket 协议 的 完整 草案 ， 请 参考 : http://tools.ietf.org/html/draft-ietf- 
hybi-thewebsocketprotocol-10。 


15.2.2 ”浏览 器 的 支持 情况 


由 于 WebSocket 协议 还 在 不 断 完善 中 ， 因 此 不 同 浏览 器 的 不 同 版 本 所 支持 的 协议 都 有 


所 差别 。 如 表 15.1 所 示 为 各 种 浏览 器 的 版 本 支持 情况 。 
表 15.1 各 浏览 器 版 本 支持 的 WebSocket 协 议 


Protocol Internet Explorer Mozilla Firefox | Google Chrome | Safari NetFront 


hixie-75 


hixie-76 4.0 11.00 
hybi-00 (DISABLED) IDISABLED) 


hybi-06 | HTML 5 Labs 


由 于 mit 协议 不 是 向 下 兼容 的 ,因此 基于 draft-hixie-thewebsocketprotocol-76 版 
本 的 浏览 器 只 能 访问 基于 同样 协议 的 服务 器 提供 的 WebSocket 服务 。 


15.3 WebSocket 编程 接口 


本 节 将 介绍 一 下 基于 WebSocket 的 脚本 编程 。 
1. 编程 接口 简介 


WebSocket 接口 提供 了 一 系列 的 属性 、 方 法 和 事件 。 其 中 接口 清单 如 示例 15-2 所 示 。 
【示例 15-2】 WebSocket 接口 清单 。 


[Constructor (DOMString url, optional DOMString protocols), 
Constructor (DOMString url, optional DOMString[] protocols)] 
interface WebSocket : EventTarget { 

readonly attribute DOMString url; 


// 就 绪 状 态 

const unsigned short CONNECTING = 0; 

const unsigned short OPEN = 1; 

const unsigned short CLOSING = 2; 

const unsigned short CLOSED = 3; 

readonly attribute unsigned short readyState; 
readonly attribute unsigned long bufferedAmount; 
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// 网 络 

[TreatNonCallableAsNull] attribute Function? onopen; 
[TreatNonCallableAsNull] attribute Function? onerror; 
[TreatNonCallableAsNull] attribute Function? onclose; 

readonly attribute DOMString extensions; 

readonly attribute DOMString protocol; 

void close([Clamp] optional unsigned short code, optional DOMString 
reason); 


// 消 息 
[TreatNonCallableAsNull] attribute Function? onmessage; 
attribute DOMString binaryType; 
void send(DOMString data); 
void send(ArrayBuffer data); 
void send(Blob data); 
| 
示例 15-2 所 示 的 接口 清单 其 功能 分 三 个 部 分 : 一 个 是 就 绪 状 态 ， 另 一 个 是 用 于 监控 网 
络 的 ， 最 后 一 个 是 发 送 和 接收 消息 。 下 面 我 们 基于 WebSocket 的 接口 清单 ， 分 别 讲解 其 中 
的 构造 函数 、 属 性 、 方 法 和 事件 。 


2. 构造 函数 


由 接口 清单 可 知 ， 该 接口 的 构造 函数 WebSocket(urLprotocols) 带 有 一 个 或 两 个 参数 。 
可 以 使 用 该 构造 函数 建立 一 个 WebSocket 的 连接 对 象 ， 方 法 如 下 : 

Var socket = new WebSocket (url,protocols); 

其 中 ,第 一 个 参数 url 指定 了 要 连接 的 URL 地 址 。 该 连接 地 址 是 以 “ws://” 和 “wss://” 
开始 的 ， 分 别 表示 常规 的 WebSocket 连接 和 安全 的 WebSocket 连接 。 

第 二 个 参数 protocols 表示 建立 连接 使 用 的 协议 ， 是 可 选 参数 。 该 参数 可 以 是 一 个 字符 
串 ， 也 可 以 是 一 个 字符 串 数 组 。 如 果 是 一 个 字符 串 ， 则 相当 于 是 由 字符 串 组 成 的 数组 ， 如 
果 该 参数 省 略 ， 则 默认 为 是 空 的 数组 。 数 组 中 的 每 一 个 字符 串 均 为 子 协议 名 称 。 只 有 服务 
器 选择 了 其 中 的 一 个 子 协 议 ， 连 接 才 会 建立 。 


3. 接口 属性 


由 接口 清单 可 知 ，WebSocket 包含 了 如 下 6 个 属性 。 

(1) URL (只 读 属性 ) 

获取 完成 构造 函数 解析 的 结果 地 址 。 

(2) readyState 〈 只 读 属 性 ) 

获取 连接 的 状态 ， 该 连接 状态 有 如 下 4 个 值 。 

口 CONNECTING (数字 值 0): 连接 尚未 构建 。 

口 OPEN (数字 值 1): WebSocket 连接 已 经 建立 ， 并 且 可 以 进行 通信 。 

口 CLOSING (数字 值 2): 正在 关闭 握手 连接 。 

口 CLOSED (数字 值 3): 连接 已 经 关闭 ， 或 连接 没有 打开 。 

其 中 , 当 WebSocket 的 连接 对 象 创建 完成 时 ,readyState 值 被 设置 为 CONNECTING(0)。 
(3) bufferedAmount (只 读 属 性 ) 

获取 发 送 前 缓冲 的 尚未 发 送 的 应 用 程序 的 字 节 数 。 这 一 部 分 数据 是 指 发 送 队 列 中 某 一 
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项 应 用 数据 已 经 开始 发 送 但 尚未 传送 到 网 络 上 的 部 分 。 

(4) extensions 〈 只 读 属 性 ) 

获取 服务 器 选择 的 扩展 。 该 属性 值 初 始 化 的 时 候 是 一 个 空 的 字符 串 ， 但 在 WebSocket 
连接 建立 之 后 ， 它 的 值 可 能 会 发 生变 化 。 

(5) protocol (只 读 属 性 ) 

获取 服务 器 选择 的 子 协议 。 该 属性 值 初 始 化 的 时 候 是 一 个 空 的 字符 串 , 但 在 WebSocket 
连接 建立 之 后 ， 它 的 值 可 能 会 发 生变 化 。 

(6) binaryType 

获取 /设置 二 进 制 类 型 。 当 WebSocket 的 连接 对 象 创建 完成 时 ，binaryType 值 被 初始 化 
为 “blob ”。 


4. 接口 方法 


由 接口 清单 可 知 ，WebSocket 包含 了 两 个 方法 ， 分 别 用 于 发 送 消息 和 关闭 连接 。 

(1) sendO 

send0 用 来 发 送 消息 ， 该 方法 的 用 法 如 下 : 

socket .send (data) ; 

该 方法 中 有 一 个 参数 data， 表 示 发 送 的 数据 。 该 数据 类 型 可 以 是 字符 串 数据 、Blob 对 
象 或 ArrayBuffer 对 象 等 。 

(2) close() 

Close0 用 来 关闭 连接 ， 该 方法 的 用 法 如 下 : 


socket .close() 


在 执行 关闭 操作 时 ， 如 果 readyState 属性 是 在 CLOSING (2) 或 CLOSED (3) 状态 ， 
则 什么 都 不 做 。 和 否则， 设置 readyState 属性 的 值 为 CLOSING (2)， 并 触发 close 事件 。 


5. 接口 事件 


WebSocket 还 提供 了 4 个 可 监听 的 事件 ， 可 以 实时 地 跟踪 消息 的 传递 、 连 接 的 状态 和 
产生 的 错误 。 

口 message 

当 浏览 器 收 到 来 自 服务 器 的 消息 时 触发 的 事件 。 使 用 的 消息 事件 接口 可 参考 14.1.4 节 。 

口 open 

当 WebSocket 连 接 已 经 建立 ,并 且 可 以 进行 通信 时 触发 的 事件 。. 即 readyState 值 为 OPEN 
(1) 时 触发 。 

口 close 

当 关 闭 连接 时 触发 的 事件 。 即 readyState 值 为 CLOSING (2) 时 触发 。 

口 error 

当 有 任何 的 错误 产生 时 触发 的 事件 。 

6. 从 协议 反馈 的 过 程 

当 WebSocket 连接 已 经 建立 后 ， 浏 览 器 需要 依次 执行 下 列 步 又 。 
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首先 ， 更 改 readyState 属性 的 值 为 OPEN (1); 其 次 ， 更 新 extensions 的 值 和 protocol 
的 值 (如果 不 为 空 时 更 新 ); 接着 , 根据 服务 器 反馈 的 信息 完成 握手 协议 ; 最 后 ,触发 open 
事件 。 

当 WebSocket 的 消息 事件 收 到 数据 时 ， 浏 览 器 需要 依次 执行 如 下 步骤 。 

首先 ， 判 断 readyState 属性 的 值 ， 如 果 不 是 OPEN (1)， 则 中 止 后 续 的 步骤 ;其 次 ， 
使 用 MessageEvent 接口 ， 并 确保 message 消息 事件 不 起 泡 、 不 取消 并 且 没 有 预 设 动作 ， 接 
着 , 初始 化 消息 事件 接口 的 origin 属性 值 为 WebSocket 连接 对 象 的 URL 属性 值 ; 之 后 , 根 
据 数 据 的 类 型 初始 化 消息 事件 接口 的 data 属性 值 为 相应 类 型 的 数据 ; 最 后 ,通过 WebSocket 
连接 对 象 调用 message 事件 。 


15.4 使 用 WebSocket 编程 


本 节 介 绍 WebSocket 的 具体 使 用 方法 。 
1. 检测 浏览 器 的 支持 情况 


与 其 他 HTML 5 的 新 特性 一 样 ， 在 使 用 WebSocket 之 前 ， 需 要 检测 浏览 器 是 否 支持 该 
特性 。 检 测 方 法 如 下 : 

if (Iwindow.WebSoket) { 
console.1og ("您 的 浏览 器 支持 WebSocket . 您 可 以 尝试 连接 到 服务 器 !"); 

} else { 
console.1og ("您 的 浏览 器 不 支持 WebSocket 。 请 选择 其 他 的 浏览 器 再 尝试 连接 服务 
器 。") ; 

2. 建立 连接 


WebSocket 建立 连接 非常 简单 。 只 要 提供 一 个 URL 地 址 ， 创 建 一 个 新 的 WebSocket 
实例 即 可 。 该 URL 地 址 是 以 “ws://” 和 “wss://” 开 始 的 。 
socket = new WebSocket ("ws://localhost:8090/chat”); 


3. 添加 状态 监听 事件 和 消息 监听 事件 


通过 给 WebSocket 对 象 添加 监听 事件 ， 可 以 及 时 地 获取 连接 状态 和 接收 消息 。 添 加 事 
件 后 ， 只 需要 等 待 事件 的 发 送 ， 而 不 用 再 去 轮 询 。 下 面 的 代码 为 WebSocket 对 象 添加 了 4 
个 监听 事件 。 


socket .onopen = function(){ 
console.1og ("连接 已 经 建立 "); 
. 


socket .onclose = function(){ 
console.1og ("连接 已 经 关闭 "); 
} 


socket .onerror = function(){ 
console.1og ("发 送 错 误 "); 
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socket .onmessage = function(evt){ 


console.1og (" 收 到 来 自 服务 器 的 消息 : "+evt .data); 


4. 发 送信 息 


当 WebSocket 对 象 处 于 打开 状态 时 ， 可 以 响应 send() 方 法 向 服务 器 端 发 送 数据 。 发 送 
信息 只 需要 如 下 操作 : 


socket .send("Hello,World! ” ); 


5. 关闭 连接 


当 需 要 关闭 连接 的 时 候 ， 可 以 直接 调用 WebSocket 对 象 的 close0 方 法 。 在 浏览 器 发 送 
消息 或 接收 消息 之 后 ，WebSocket 对 象 是 不 会 主动 关闭 连接 的 ， 只 有 调用 了 close() 方 法 ， 
浏览 器 才 会 主动 关闭 连接 。 


Socket .close() 


15.5 ”实验 室 : 构建 实时 的 聊天 应 用 


本 节 将 通过 一 个 聊天 示例 来 巩固 前 面 学 习 的 WebSocket 知识 。 
1， 案例 简介 


本 节 案 例 是 一 个 基于 WebSocket 的 聊天 室 。 该 聊天 页 面 主要 包含 三 个 聊天 方面 的 功能 : 
首先 ， 通 过 单 击 “ 连 接 ” 按 钮 ， 与 WebSocket 服务 器 建立 连接 ， 其 次 ， 显 示 聊 天 室 产 生 的 
消息 ;最 后 ， 发 送 聊 天 消息 。 聊 天 页 面 如 图 15-2 所 示 。 


Oe :onts 


© |© yxv740:8080/he/Chapter15/websocke:client. htal 


WebSocket 聊天 室 
连接 


您 的 浏览 器 支持 WebSocket。 您 可 以 尝试 连接 到 聊天 服务 器 ! 
准备 连接 到 聊天 服务 器 .. . 

连接 已 经 建立 。 

欢迎 Yang 来 到 聊天 室 ! 

Yang 说 : Hello,World! 

4 

la2nm 

12nm 


用 户 |Yang 


图 15-2 基于 WebSocket 的 聊天 页 面 
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2. 服务 器 端的 部 署 


一 个 完整 的 WebSocket 应 用 需要 由 服务 器 提供 一 个 WebSocket 服务 。 该 服务 可 以 使 用 
多 种 开发 语言 来 开发 。 服 务 器 端的 实现 完全 需要 参考 相关 的 WebSocket 协议 。 对 于 
WebSocket 服务 具体 实现 ， 这 里 不 做 讨论 。 这 里 提供 几 种 资源 供 读 者 学 习 使 用 。 

口 本 书 会 提供 一 份 WebSocket 的 服务 器 端 实现 的 源 代码 ， 发 布 运行 后 ， 会 提供 一 个 

WebSocket 服务 的 地 址 : ws://localhost:8090/chat。 

口 这 里 有 WebSocket 的 服务 器 端的 实现 ， 是 基于 .NET 的 : http://superwebsocket. 
codeplex.com/。 运 行 发 布 后 的 文件 里 的 RunServer.bat， 将 会 提供 一 个 WebSocket 
服务 ， 其 默认 地 址 为 ws://localhost:2011/sample。 

本 节 介 绍 的 案例 使 用 本 书 提供 的 服务 实现 , WebSocket 地 址 为 :ws://localhost:8090/chat。 


3. 设计 聊天 页 面 


在 聊天 页 面 中 ， 根 据 案例 的 描述 ， 设 计 一 个 “连接 ”按钮 ， 用 于 单 击 触发 与 服务 器 连 
接 ; 中间 设 计 一 个 显示 区 域 ， 用 于 显示 连接 过 程 中 产生 的 消息 ， 以 及 聊天 室 其 他 人 发 送 的 
消息 ;最 下 面 设计 用 于 聊天 发 送信 息 的 姓名 、 聊 天 内 容 和 “发 送 ”按钮 。 

如 示例 15-3 所 示 ,“ 连 接 ” 按 钮 的 单 击 事件 绑 定 了 Connection0) 处 理 函 数 ;“ 发 送 ” 按 
钮 的 单 击 事件 绑 定 了 SendData0) 处 理 函数 。 

【示例 15-3】 基于 WebSocket 的 聊天 页 面 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="uft-8" /> 
<title>Web sockets</title> 
<style type="text/css"> 
<!-- 省 略 样式 表 -=> 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
</head> 
<body> 
<form id="forml" runat="server"> 
<h1l>WebSocket 聊天 室 </h1> 
<div><input type="button" id="ConnectButton" value=" 连 接 " onClick= 
"Connection () " /> 连接 状态 : <span id="state"></span></div> 
<div id='LogContainer' class='container'></div> 
<div> 
用 户 <input type="text" id="txtName" value="Yang" size="6" /><input 
type="text" id="Data" size="40" /> 
<button id='SendBut' type="button" onclick='SendData()'> 发 送 
</button> 
</div> 
</form> 
</body> 
</html> 


4. 添加 WebSocket 代 码 
首先 ,在 页 面 加 载 的 时 候 , 判断 浏览 器 是 否 支 持 WebSocket 功能 .并 设计 了 Connection() 


s 
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处 理 函 数 用 于 与 WebSocket 服务 器 的 连接 。 
在 Connection0) 处 理 函 数 中 ， 连 接 完 成 时 ， 对 WebSocket 对 象 ws 绑 定 4 个 监听 事件 。 
其 中 open 和 close 用 于 监听 连接 状态 ; error 用 于 监听 错误 ; message 用 于 监听 接收 消息 。 
所 有 的 监听 事件 都 会 有 消息 显示 在 显示 区 域 。 
另外 , 在 open 事件 中 ,会 给 服务 器 发 送 上 线 欢 迎 辞 信息 ， 服 务 器 收 到 消息 后 , 会 广播 
给 所 有 在 线 人 员 。 
<script type="text/javascript"> 
Var Ws; 
Var SocketCreated = false; 


window.onload = function(){ 


// 检 测 浏览 器 是 否 支 持 WebSocket 
if (!window.WebSoket) { 


Log ("您 的 浏览 器 支持 WebSocket . 您 可 以 尝试 连接 到 聊天 服务 器 !"，"OK"); 


} else { 
Log ("您 的 浏览 器 不 支持 Websocket 。 请 选择 其 他 的 浏览 器 再 尝试 连接 服务 
器 。"， "ERROR") ; 
document .getElementById("ConnectButton") .disabled = true; 
h 
} 
// 建 立 与 服务 器 的 连接 ， 并 添加 监听 事件 
function Connection () { 
// 如 果 连 接 已 经 存在 ， 则 关闭 连接 。 和 否则 建立 连接 
if (SocketCreated && (ws.readyState == 0 || ws.readyState == 1)) { 
ws.close(); 
} else { 
Log ("准备 连接 到 聊天 服务 器 ..."); 
// 建 立 与 服务 器 的 连接 
Ws = new WebSocket ("ws://localhost:8090/chat"); 
SocketCreated = true; 
document .getElementById("ConnectButton") .value = " 断 开 "7 
// 添 加 open 监听 事件 ， 监 听 打开 连 接 的 状态 
ws.onopen = function() { 
Log ("连接 已 经 建立 。"，"OK"); 
ws .send ("欢迎 " + document .getElementById ("txtName"). 
value+" 来 到 聊天 室 ! ") ; 


| 
// 添 加 message 监听 事件 ， 监 听 接 收 消息 
ws.onmessage = function(event) { 
Log (event .data); 
} 
// 添 加 close 监听 事件 ， 监 听 关 闭 连接 的 状态 
ws.onclose = function () { 
Log ("连接 关闭 。"， "ERROR"); 
document .getElementById ("ConnectButton") .value = "连接 "; 
// 添 加 erro 监听 事件 ， 监 听 错 误 
ws.onerror = function() { 
Log ("WebSocket 错误 。"， "ERROR") 
} 
} 
</Seript>: 
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5. 完善 其 他 代码 


添加 上 一 步 用 到 的 SendData0 函 数 和 Log0 函 数 。 其 中 SendData0 函 数 用 于 向 服务 器 发 
送 消息 ，LogO 函 数 用 于 显示 聊天 过 程 中 产生 的 消息 。 


<script type="text/javascript"> 
// 发 送 消息 给 服务 器 
function SendData() { 
Var obj = document .getElementById ("Data"); 
if (obj.value != "") { 
ws.send(document .getElementById("txtName") .value + "说 : "+ 
obj .value); 
obj.value = ""; 


} 


} 
// 显 示 消 息 处 理 函数 
function Log (Text，MessageType) { 
if (MessageType == "OK") Text = "<span style='color: green; '>" + Text 
ED 
if (MessageType == "ERROR") Text = "<span style='color: red;'>" + 
Text + "</span>"; 
Var LogContainer = document .getElementById ("LogContainer"); 
LogContainer.innerHTML += Text + "<br />"; 
LogContainer.scrollTop = LogContainer.scrollHeight; 
} 
</script> 
到 这 里 ， 聊 天 室 的 浏览 器 端 就 开发 完成 了 。 确 保 WebSocket 服务 器 正在 运行 ， 然 后 运 
行 本 节 介 绍 的 案例 的 页 面 ， 单 击 “ 连 接 ” 按 钮 ， 即 可 与 服务 器 建立 连接 。 此 时 ， 也 可 以 尝 
试 给 服务 器 发 送 消息 。 
为 了 能 够 演示 聊天 效果 ， 可 以 在 多 个 浏览 器 窗口 中 打开 本 页 面 ， 或 与 其 他 人 一 起 打开 
本 页 面 。 当 其 中 一 个 浏览 器 窗口 发 送 消息 时 ， 打 开 该 页 面 的 其 他 窗口 或 个 人 ， 均 能 收 到 这 
个 浏览 器 窗口 发 送 的 消息 。 


15.6 小 结 


本 章 主 要 讲解 了 HTML 5 的 WebSocket 双向 通信 。 重 点 讲解 了 WebSocket 的 概念 ， 以 
及 WebSocket 的 编程 接口 ， 并 详细 讲解 了 如 何 使 用 接口 构建 一 个 实时 的 聊天 应 用 程序 。 本 
章 的 难点 在 于 对 WebSocket 概念 的 理解 ， 其 中 涉及 的 WebSocket 协议 ， 对 很 多 开发 人 员 来 
说 是 一 个 完全 陌生 的 领域 。 如 果 要 完全 理解 和 掌握 WebSocket 相关 的 通信 协议 ， 以 及 相关 
的 服务 器 方面 的 部 署 ， 则 是 一 个 巨大 的 挑战 ， 需 要 涉及 更 多 的 其 他 方面 的 知识 。 下 一 章 将 
介绍 HTML 5 的 Web Workers 多 线程 处 理 。 


15.7 村 题 


【习题 1】 请 简要 说 明 一 下 WebSocket 的 优势 。 


-es 
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【习题 2】 请 简要 说 明 一 下 WebSocket 握手 协议 的 过 程 。 
【习题 3】 下 列 选项 中 ， 哪 些 是 WebSocket 接口 中 的 事件 (多 选 ): 
A. load B. close C. message 


D. processs E. error F. open 


【习题 4】 请 基于 一 个 WebSocket 服务 器 ， 开 发 一 个 实时 的 聊天 页 面 。 
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一 直 以 来 ，Web 应 用 程序 都 只 能 在 单一 的 线程 中 进行 。 如 果 需 要 Web 应 用 程序 进行 长 
时 间 的 处 理 如 复杂 的 数学 计算 等 ， 则 会 导致 Web 页 面 长 时 间 处 于 无 法 响应 的 状态 , 还 有 可 
能 因为 超时 而 无 法 处 理 。HTML 5 新 增 的 Web Workers 可 以 让 Web 应 用 具有 多 线程 处 理 的 
能 力 。 通 过 Web Workers， 可 以 创建 一 个 专属 的 处 理 线程 ， 并 且 可 以 再 次 嵌 套 子 线程 ， 也 
可 以 创建 一 个 共享 的 线程 ， 它 允许 同 域 的 Web 应 用 访问 。 本 章 将 详细 介绍 Web Workers 的 
各 种 使 用 方法 及 相应 的 编程 接口 。 


16.1 Web Workers 概述 


1. Web Workers 简 介 


为 了 适应 互联 网 的 发 展 ，HTML 5 提出 了 Web Workers 的 概念 ， 以 实现 Web 应 用 的 多 
线程 处 理 。 基 于 Web Workers， 可 以 在 后 台 创 建 一 个 运行 脚本 的 线程 ， 该 线程 的 运行 独立 
于 任何 页 面 。 

使 用 Web Workers 创建 的 独立 的 线程 ， 可 以 长 时 间 地 去 执行 一 个 任务 。 在 线程 执行 任 
务 期 间 ， 不 会 因为 用 户 的 单 击 操作 或 其 他 用 户 界 面 的 交互 行为 而 中 断 。 同 样 ， 也 不 会 因为 
线程 还 在 执行 中 ， 造 成 用 户 界 面 无 法 响应 操作 。 

一 般 情况 下 ， 线 程 都 是 做 一 些 重 量 级 的 处 理 ， 也 是 无 法 及 时 得 到 反馈 的 处 理 ， 这 些 交 
给 线程 处 理 ， 是 最 合适 不 过 的 。 因 此 ， 这 样 的 处 理 常常 是 长 时 间 处 于 执行 的 活跃 状态 ， 并 
伴随 着 大 量 的 CPU 性 能 消耗 和 大 量 的 内 存 消耗 。 

关于 线程 的 概念 ， 在 其 他 很 多 编程 语言 中 都 有 涉及 。 随 着 越 来 越 多 的 应 用 处 理 都 交 给 
Web 页 面 来 处 理 ，HTML 5 增加 了 线程 处 理 功 能 ， 提 高 了 JavaScript 的 编程 能 力 。 然 而 与 
很 多 编程 语言 的 线程 处 理 不 同 的 是 ， 使 用 JavaScript 编写 多 线程 比较 简单 ， 因 为 很 多 浏览 
器 已 经 帮 我 们 做 了 很 多 工作 。 

2. Web Workers 线 程 特 征 


首先 ，Worker 线程 不 能 操作 window 对 象 和 document 对 象 。 如 果 在 线程 文件 中 使 用 了 
window 对 象 或 document 对 象 ， 则 会 发 生 错 误 。 

其 次 ，Worker 线程 在 本 质 上 属于 系统 线程 ， 是 线程 执行 的 一 种 方式 。 

最 后 ，HTML 5 还 为 Worker 线程 提供 了 范围 接口 ， 规 范 了 Worker 线程 的 操作 范围 。 
例如 ， 在 Worker 线程 中 可 以 使 用 setTimeout()，clearTimeout()，setInterval()，clearInterval() 
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3. Web Workers 体 系 结构 


在 最 新 的 Web Workers 规范 中 ， 包 含 了 两 种 线程 : 一 种 是 专属 线程 Dedicated Worker， 
另 一 种 是 共享 线程 Shared Worker。 这 两 种 线程 有 着 不 同 的 用 途 ， 并 且 使 用 不 同 的 接口 来 
实现 。 

专属 线程 通常 是 在 一 个 页 面 中 创建 的 ， 并 且 该 线程 只 能 同 创 建 它 的 页 面 进行 通信 。 

而 共享 线程 通常 是 由 其 中 的 一 个 页 面 创建 的 ， 其 他 页 面 也 可 以 连接 到 该 线程 ， 使 用 该 
线程 中 的 资源 和 信息 。 

Web Workers 规范 中 ， 不 仅 包含 了 专属 线程 和 共享 线程 的 接口 ， 而 且 包含 与 线程 处 理 
相关 的 错误 处 理 接口 ， 以 及 线程 使 用 的 导航 、 本 地 属性 和 工作 单元 等 接口 。 

下 面 将 基于 该 体系 结构 逐步 讲解 。 


16.2 专属 线程 


专属 线程 (Dedicated Worker)， 通 常 是 由 创建 它 的 页 面 负责 与 之 通信 的 ， 也 是 较 早 形 
成 规范 的 线程 处 理 方式 。 专 属 线程 使 用 的 是 Worker 对 象 。 


16.2.1 专属 线程 的 基本 用 法 


本 节 将 详细 介绍 专属 线程 的 基本 用 法 。 为 了 便于 说 明 ， 我 们 创建 了 一 个 页 面 
Code16-1.html 和 一 个 线程 脚本 文件 Code16-1.js。 专属 线程 的 用 法 非常 简单 ， 只 需要 在 页 面 
中 创建 一 个 Worker 对 象 ， 并 指定 线程 脚本 文件 即 可 。 在 线程 通信 方面 ， 仍 然 使 用 
postMessage () 方 法 和 message 事件 。 


1. 检测 浏览 器 的 支持 情况 
与 HIML 5 的 其 他 新 特性 一 样 ， 在 使 用 Worker 对 象 之 前 ， 需 要 检测 浏览 器 是 否 支持 
该 特性 。 检 测 方法 如 下 : 


if(typeof Worker "undefined"){ 
alert ("浏览 器 不 支持 Web Workers"); 


| 


由 于 专属 线程 使 用 的 是 Worker 对 象 ， 因 此 我 们 只 需 使 用 typeof 运算 符 来 返回 window 
对 象 的 Worker 属性 即 可 。 如 果 浏 览 器 不 支持 专属 线程 处 理 ， 则 返回 的 是 "undefined"。 

2. 创建 专属 线程 

在 使 用 Worker 对 象 创建 专属 线程 时 ， 需 要 为 Worker 对 象 的 构造 函数 提供 一 个 
JavaScript 脚本 文件 的 URL 地 址 ， 该 脚本 文件 中 包含 了 线程 中 所 要 执行 的 代码 。 需 要 注意 
的 是 ， 脚 本 文件 的 URL 地 址 可 以 是 相对 地 址 或 者 绝对 地 址 ， 但 该 URL 地 址 受 浏览 器 的 同 
源 策略 限制 。 


Var worker = new Worker("Code16-1.js"); 
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实例 化 Worker 对 象 ， 即 创建 了 一 个 专属 线程 。"Code16-1:js" 是 线程 执行 的 脚本 文件 。 
3. 给 线程 添加 监听 消息 事件 


如 果 线 程 中 有 消息 反馈 , 可 以 通过 添加 Worker 对 象 的 message 事件 来 监听 从 线程 发 来 
的 消息 ， 如 下 所 示 : 


worker.addEventListener('message', function(e) { 


// 处 理 线程 worker 发 来 的 消息 


}, true); 


也 可 以 使 用 Worker 对 象 的 onmessage 事件 句柄 的 方法 ， 如 下 所 示 : 


worker.onmessage = function(e) { 


// 处 理 线程 worker 发 来 的 消息 


上} 

4. 向 线程 中 发 送 消息 

使 用 Worker 对 象 的 postMessage 0 方法 ， 可 以 向 线程 中 发 送 消 息 ， 如 下 所 示 : 

worker.postMessage ("Yang"); 

这 里 假设 向 线程 中 发 送 一 个 姓名 为 "Yang" 的 字符 串 。 

5. 编写 线程 处 理 的 脚本 文件 

在 后 台 的 线程 中 是 不 能 访问 页 面 文 档 或 窗口 对 象 的 。 如 果 使 用 了 window 对 象 或 
document 对 象 ， 则 会 发 生 错误 。 这 里 ， 我 们 假设 线程 的 脚本 做 这 样 的 处 理 : 当 收 到 页 面 发 
来 的 消息 后 ， 处 理 消息 并 把 反馈 的 结果 发 回 页 面 。 

由 于 线程 的 脚本 文件 中 涉及 消息 的 接收 与 发 送 , 因此 仍然 使 用 了 postMessage () 方 法 和 
message 事件 ， 如 下 所 示 。 


onmessage = function(e){ // 监 听 页 面 发 来 的 消息 
var val = "Hello,"; 
postMessage (val+e.data) : // 向 页 面 发 送 消息 


} 

通过 在 文件 中 直接 添加 message 事件 , 即 可 监听 页 面 发 来 的 消息 ; 直接 使 用 postMessage 
0 方法 即 可 向 页 面 发 送 消息 。 

6. 在 线程 中 加 载 多 个 文件 


对 于 由 多 个 Jsvascript 脚本 文件 组 成 的 Web 应 用 程序 来 说 ， 可 通过 包含 <scrip 们 元 素 的 
方式 来 同步 加 载 相关 的 脚本 文件 。 由 于 在 后 台 的 线程 中 不 能 访问 document 对 象 , 因此 不 能 
采用 包含 <script> 元 素 的 方式 。 

Web Workers 提供 了 另外 一 种 导入 其 他 文件 的 方法 一 一 importScript。 在 脚本 文件 中 导 
入 其 他 脚本 文件 ， 如 下 所 示 : 


importScript ("xxx.js"); 


导入 的 脚本 文件 只 会 在 已 有 的 Worker 对 象 中 加 载 和 执行 .也 可 以 同时 导入 多 个 脚本 文 
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件 ， 如 下 所 示 : 


importScript ("xxx.js","yyyY,js"); 


7. 监听 线程 错误 


如 果 执 行 的 线程 出 现 错误 ， 是 无 法 直接 反馈 到 页 面 上 的 。 不 过 ， 我 们 可 以 给 Worker 
对 象 添 加 错误 监听 事件 ， 来 监听 线程 中 出 现 的 错误 。 特 别 是 调试 的 时 候 ， 使 用 这 种 方法 监 
听 事 件 非 常 有 效 。 和 添加 message 事件 一 样 ， 我 们 也 可 以 给 Worker 对 象 添 加 error 事件 以 
监听 线程 中 的 错误 。 如 下 所 示 。 

worker.addEventListener('error', function(e) { 


console.warn(e.message,e); 
}, true); 


也 可 以 使 用 Worker 对 象 的 onerror 事件 句柄 的 方法 ， 如 下 所 示 。 


worker.onerror = function(e) { 
console.warn(e.message,e); 


} 


8. 一 个 简单 的 线程 示例 


页 面 中 有 一 个 输入 姓名 的 文本 框 和 一 个 按钮 。 当 单 击 按钮 时 ， 会 调用 Greeting0 函 数 ， 
该 函数 会 新 建 一 个 线程 ， 并 把 输入 的 姓名 发 送 给 线程 ;线程 接收 到 姓名 ， 会 发 回 一 个 欢迎 
辞 ， 页 面 监 听 到 线程 的 消息 ， 会 把 消息 显示 在 页 面 上 。 

【示例 16-1】 示例 的 页 面 文 件 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Web Workers</title> 
<script type="text/javascript"> 
function Greeting(){ 
// 检 测 浏览 器 支持 性 
if(typeof Worker === "undefined"){ 
console.10g ("浏览 器 不 支持 Web Workers"); 
return; 


外 
// 创 建 专属 线程 
Var worker = new Worker ("Code16-1.js") : 
// 监 听 线 程 的 消息 
worker .onmessage = function(e){ 
document .getElementById ("msg") .innerText= e.data; 


J] 

// 监 听 线 程 的 错误 

worker.onerror = function(e){ 
console.warn(e.message,e); 

} 

Var val = document .getElementBylId ("Name") .value; 

// 向 线程 发 送 消息 

worker .postMessage (val); 

hyeript> 


.348 。 
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</head> 

<body> 

<input type="text" id="Name" value="" /> 

<input type="button" value=" 欢 迎 矢 " onClick="Greeting()" /> 
<span id="msg"></span> 


</body> 

</html> 

示例 的 线程 脚本 文件 如 下 所 示 : 

onmessage = function(e){ // 监 听 页 面 发 来 的 消息 


Var val = "Hello,"; 
postMessage (valte.data); // 向 页 面 发 送 消息 
| 


运行 结果 如 图 16-1 所 示 。 


Ore rorkers 
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‘Yang 欢迎 辞 | Hello, Yang 


图 16-1 一 个 简单 的 线程 示例 
本 节 的 示例 仅 作 学 习 之 用 。 实 际 上 ， 专 属 线程 可 以 长 时 间 地 处 理 一 个 后 台 任 务 。 


16.2.2 ”多 个 线程 嵌 套 


线程 中 可 以 嵌 套 子 线程 ， 这 样 我 们 就 可 以 把 较 大 的 线程 处 理 分 解 成 多 个 子 线程 ， 在 每 
个 子 线程 中 ， 各 自 完成 相对 独立 的 部 分 。 

线程 撕 套 的 方法 ， 就 是 在 一 个 线程 中 创建 另外 一 个 子 线程 。 在 线程 文件 中 创建 子 线程 
的 方法 如 下 : 

Var subworker = new Worker('subworker.js'); 

这 样 ， 我 们 可 以 像 操 作 在 页 面 中 创建 的 主线 程 一 样 ， 去 操作 这 个 线程 ， 如 添加 消息 监 
听 事 件 和 错误 监听 事件 等 。 


避 提 示 : 有 些 支持 Web Worders 线程 的 浏览 器 ， 不 一 定 也 支持 线程 就 套 ， 如 Chrome 目前 
的 版 本 就 不 支持 线程 谋 套 。 所 以 在 使 用 线程 谋 套 时 ， 有 必要 先 检查 一 下 浏览 器 是 
否 支 持 。 
多 个 线程 的 对 套 有 两 种 方式 : 单 层 线程 嵌 套 和 多 层 线程 嵌 套 。 
1. 单 层 线程 赃 套 
单 层 线程 嵌 套 ， 主 要 是 在 一 个 主线 程 中 ， 创 建 另 外 一 个 子 线程 ， 以 完成 独立 的 工作 。 
由 于 是 多 个 线程 同时 处 理 ， 因 此 执行 起 来 是 非常 高 效 的 。 
段 设 我 们 在 主线 程 中 提供 一 组 数字 ， 分 别 求 出 小 于 它们 的 最 大 素数 。 那 么 这 个 求 素数 
的 功能 ， 就 可 以 交 给 子 线程 来 执行 。 我 们 需要 编写 三 个 文件 :Web 网 页 、 主 线程 文件 、 子 
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线程 文件 。 

首先 ， 我 们 编写 Web 网 页 (Code16-2page.html)， 用 于 创建 一 个 Worker 的 主线 程 〈 即 
专属 线程 )， 并 监听 从 主线 程 中 返回 的 消息 ， 最 终 显 示 在 页 面 上 。 

【示例 16-2】 单 层 线程 嵌 套 示例 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<tit1le> 线 程 嵌 套 示例 </title> 
</head> 
<body> 
<p> 结 果 : 
<output id="result"></output> 
</p> 
<script type="text/javascript"> 
Var worker = new Worker('Codel16-2worker.js'); 
worker.onmessage = function (evt){ 
document .getElementById('result') .innerHTML += "<br />"+ 
JSON.stringify(evt.data); 


上 
WoLrker .onerror = function(e)1{ 
console.log(e.message); 
worker.terminate(); 
了 
</script> 
</body> 
</html> 


接着 ， 编 写 主线 程 文件 (Code16-2workerjs)。 在 主线 程 中 ， 我 们 通过 循环 10 次 的 方 
式 提供 了 10 个 数字 ， 并 分 别 创建 一 个 子 线程 ,用 于 计算 小 于 该 数字 的 最 大 素数 。 当 收 到 子 
线程 的 消息 时 ， 立 即 发 送 给 应 用 页 面 ， 代 码 如 下 : 

// 基 本 设置 


Var num workers = 10; 
var step = 1000; 
// 开 始 添加 子 线程 
if(typeof Worker !== "undefined"){ 
// 开 始 添加 子 线程 
for (var i = 0; i <= num workers; i += 1){ 
Var subworker = new Worker('Code16-2subworker.js'); 
subworker .onmessage = storeResult; 
subworker.postMessage (i * step); 
} 
}elsef{ 
postMessage ("浏览 器 不 支持 线程 杠 套 ! ") ; 
} 
// 结 果 处 理 
function storeResult (e){ 
postMessage (e.data); // 向 页 面 发 送 消 息 ! 
} 


最 后 ， 编 写 子 线程 文件 (Code16-2subworkerjs )。 该 子 线程 接收 主线 程 发 来 的 数字 ， 
并 求 出 小 于 该 数字 的 最 大 素数 。 代 码 如 下 : 
// 求 范围 内 的 最 大 素数 
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onmessage = function (e) { 
Var num==1* e.data + 1; 
search : while (num>1) { 
num 一 一 7 
isprime = false; 
for (var i = 2,x=Math.sqrt (num) ; i <= x; i++){ 
if (num $ i == 0){ 
continue search; 
1 
postMessage (e.data + "以 内 的 最 大 素数 是 : " + num); 
break; 
} 
. 


运行 页 面 结果 如 图 16-2 所 示 。 


国 [+ 加 
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“2000 以 内 的 最 大 素数 是 : 1999” 
“1000 以 内 的 最 大 素数 是 : 997” 

“3000 以 内 的 最 大 素数 是 : 2999” 
“5000 以 内 的 最 大 素数 是 : 4999” 
“4000 以 内 的 最 大 素数 是 : 3989” 
“6000 以 内 的 最 大 素数 是 : 5987” 
“7000 以 内 的 最 大 素数 是 : 6997” 
“8000 以 内 的 最 大 素数 是 : 7993” 
“9000 以 内 的 最 大 素数 是 : 8999” 
“10000 以 内 的 最 大 素数 是 : 9973” 


图 16-2 单 层 线程 嵌 套 示例 


代码 分 析 : 在 示例 16-2 中 ， 主 线程 连续 创建 了 10 个 子 线程 ， 并 分 别 添加 了 监听 消息 
事件 。 在 如 图 16-2 所 示 的 执行 结果 中 ,消息 返回 的 顺序 与 线程 创建 的 顺序 是 不 一 致 的 ， 说 
明 创建 的 这 些 线程 是 并 行 执行 的 。 


2. 多 层 线 程 庶 套 


多 层 线程 嵌 套 , 主要 是 指 主线 程 中 会 创建 多 个 子 进 程 , 并 且 在 子 进 程 问 进行 数据 交互 。 
与 单 层 线程 嵌 套 相 比 ， 多 层 线程 嵌 套 在 代码 编写 方面 是 层 层 庶 套 的 。 

要 在 多 层 线 程 嵌 套 中 实现 子 线程 之 间 的 数据 交互 ， 基 本 上 遵循 如 下 步 又 。 

(1) 在 主线 程 中 创建 子 线程 ， 可 选择 向 该 子 线程 发 送 数据 。 

(2) 执行 子 线程 中 的 任务 ， 并 把 执行 结果 发 回 主线 程 。 


(3) 主线 程 监听 到 上 一 个 子 线程 发 来 的 消息 数据 后 ， 即 创建 下 一 个 子 线程 ， 并 把 上 
个 子 线程 发 来 的 消息 传递 给 下 一 个 子 线程 ， 然 后 再 执行 下 一 个 子 线程 ， 如 此 循环 霸 套 。 

(4) 主线 程 接 收 最 后 一 个 子 线程 发 来 的 消息 。 

这 样 ， 就 实现 了 多 层 线程 嵌 套 。 下 面 我 们 用 一 个 样 例 来 了 解 多 层 线程 嵌 套 的 实现 。 

【示例 16-3】 多 层 线程 嵌 套 样 例 。 

// 创 建 第 一 个 子 线程 


Var subworker = new Worker('subworker.js'); 
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subworker .postMessage (100); 
// 监 听 第 一 个 子 线程 的 消息 


subworker.onmessage = function(e){ 


} 


// 创 建 第 二 个 子 线程 

Var subworker2 = new Worker('subworker2.js'); 

// 把 第 一 个 线程 发 来 的 数据 发 送 到 第 二 个 线程 

subworker2 .postMessage (e.data); 

// 监 听 第 二 个 子 线程 的 消息 

Subworker2 .onmessage = function(e){ 
PostMessage (e.data) ; // 向 页 面 发 送 消息 

} 


值得 注意 的 是 ， 多 层 线程 典 套 并 不 是 在 子 线程 中 再 创建 子 线程 ， 而 是 所 有 的 子 线程 都 
是 在 主线 程 中 以 嵌 套 的 方式 创建 的 ， 并 实现 一 个 子 线程 向 另 一 个 子 线程 传递 数据 。 


16.2.3 ”实验 室 : 专属 线程 中 的 异步 请 求 


本 小 节 将 演示 一 下 专属 线程 的 复杂 应 用 ， 在 一 个 子 线程 中 发 起 异步 数据 请 求 ， 并 将 数 
据 传 递 到 另 一 个 子 线程 中 去 处 理 。 这 里 用 到 了 多 层 线 程 嵌 套 的 实现 方法 。 

1.， 案例 简介 

在 本 节 介 绍 的 案例 中 ，Web 页 面 会 创建 一 个 主线 程 ， 主 线程 会 再 创建 一 个 用 于 向 服务 
器 发 起 异步 请 求 的 子 线程 ， 并 在 该 子 线程 的 消息 监听 事件 中 创建 另 一 个 子 线程 ， 用 于 处 理 
异步 请 求 获得 的 数据 。 

整个 案例 将 会 用 到 5 个 文件 ， 分 别 如 下 。 


图 | 


口 
口 


| 


口 


数据 文件 (Code16-4xhr.txt): 异步 请 求 的 服务 器 文件 ， 为 简单 起 见 ， 该 文件 中 仅 
保存 了 一 个 数字 数组 。 

页 面 文件 (Code16-4page.html): Web 应 用 的 入 口 页 面 , 该 页 面 会 创建 一 个 主线 程 。 
主线 程 文件 (Code16-4workerjs): 该 文件 会 创建 两 个 子 线程 ， 并 负责 把 一 个 子 线 
程 的 数据 传递 给 另外 一 个 子 线程 。 

异步 请 求 子 线 程 文件 (Code16-4xhrWorkerjs): 主要 负责 向 服务 器 端 发 起 异步 请 求 ， 
并 返回 请 求 的 数据 。 

数据 处 理子 线程 文件 (Code16-4rangeWorkerjs): 接收 数组 数据 并 处 理 ， 以 获取 数 
组 中 的 最 大 值 和 最 小 值 。 


在 整个 线程 的 数据 交互 过 程 中 ， 我 们 使 用 。 | ee 


的 是 结构 化 的 JSON 数据 ， 以 实现 更 便捷 的 操 
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线程 处 理 结果 : 


作 。 假 设 数据 文件 中 是 一 个 数字 数组 的 字符 串 最 大 值 : 9; 最 小 值 : 1 


“[2,1,7,4,9,8,5,3,6] ” 则 运行 的 结果 将 如 图 16-3 


所 示 。 


2. 页面 文件 设计 图 16-3 ”线程 中 的 异步 请 求 


在 页 面 文件 《Code16-4pagehtml) 中 负责 创建 主线 程 ， 监 听 主 线程 的 消息 ， 并 把 消息 


和 
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内 容 显 示 出 来 。 
【示例 16-4】 线程 中 的 异步 请 求 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> 使 用 线程 处 理 异 步 请 求 的 数据 </title> 

<style type="text/css"> 

output{color:#006699;border:1px solid #CCCCCC;padding:S5px;display:block;} 


</style> 
</head> 
<body> 
<p> 线 程 处 理 结果 : 
<output id="result"></output> 
</p> 
<script type="text/javascript"> 
// 创 建 主线 程 
Var worker = new Worker('"Code16-4worker.js'): 
// 添 加 消息 监听 事件 
worker.onmessage = function (evt){ 
var json = JSON.parse (evt.data); //JSON 数据 处 理 


var obj = document .getElementById('result'); 
obj .innerHTML += "最 大 值 : " + json.maxValue; 
obj .innerHTML += "; 最 小 值 : " + json.minValue; 


了 
// 添 加 错误 监听 事件 
worker.onerror = function(e){ 
console.log(e.message); 
worker.terminate(); 
}; 
</script> 
</body> 
</html> 


3. 主线 程 文件 设计 

在 主线 程 文件 (Code16-4workerjs) 中 ， 使 用 的 是 多 层 线程 嵌 套 的 方案 。 首 先 创建 
个 xhrWorker 子 线程 《负责 异步 请 求 服务 器 数据 ); 其 次 在 xhrWorker 线程 的 消息 监听 事件 
中 创建 另外 一 个 rangeWorker 子 线程 (接收 数组 数据 并 处 理 )， 最 后 在 rangeWorker 子 线程 
的 消息 监听 事件 中 向 页 面 发 送 接收 到 的 消息 。 


// 创 建 异步 请 求 子 线程 
Var xhrWorker = new Worker('Code16-A4xhrWorker.js'); 


// 监 听 蜡 步 请 求 子 线程 的 消息 
xhrWorker.onmessage = function(e){ 


// 创 建 数据 处 理子 线程 


Var rangeWorker = new Worker('Codel16-4rangeWorker.js'); 


// 传 递 数据 
rangeWorker .postMessage (e.data); 


// 监 听 数 据 处 理子 线程 的 消息 


rangeWorker.onmessage = function(e){ 


下 
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postMessage (e.data) ; // 向 页 面 发 送 消息 


和 

4. 异步 请 求 子 线程 文件 设计 

在 异步 请 求 子 线程 文件 (Code16-4xhrWorkerjs) 中 ， 向 服务 器 发 起 异步 请 求 ， 并 将 请 
求 到 的 文件 发 送 给 主线 程 。 

// 蜡 步 请 求 数据 

Var xmlHttp = new XMLHttpRequest (); 

xmlHttp.onerror=function(e){ 


postMessage (null); 

上 

xmlHttp.onload=function (e){ 
postMessage (xmlHttp.responseText); 
close(); 


} 
xmlHttp.open("get","Codel16-4xhr .txt?"+(new Date () ) .getTime () ,true) 


xmlHttp.send (nul1) : 


5. 数据 处 理子 线程 文件 设计 


在 数据 处 理子 线程 文件 〈Code16-4rangeWorkerjs) 中， 接收 主线 程 发 来 的 消息 ， 并 作 
为 数组 进行 处 理 。 使 用 循环 的 方式 求 出 数组 中 的 最 大 值 和 最 小 值 ， 并 将 获得 的 结果 放 在 
个 对 象 中 返回 。 

// 求 数组 的 最 大 值 和 最 小 值 


onmessage = function (e){ 
Var arr = JSON.parse(e.data) 7 
Var result={ 
maxValue:0, 
minValue:0 
}; 
if(arr.length>0){ 


result.maxValue = arr[0]; 
result.minValue = arr[0]; 
j 
for(var i = 0, n = arr.length; i < n; i++){ 
// 求 最 大 值 
if(result.maxValue < arr[i]){ 
result .maxValue = arr[i]; 
} 
// 求 最 小 值 
if(result.minValue > arr[i]l)1{ 
result.minValue = arr[il]; 
} 
} 
postMessage (JSON .stringify (result)); 
close(); 


至 此 ， 就 完成 了 整个 案例 ， 运 行 结果 如 图 16-3 所 示 。 这 个 案例 也 说 明了 在 Worker 线 
程 中 可 以 发 起 异步 请 求 。 


.354 


第 16 章 Web 背后 一 一 看 不 见 的 多 线程 


16.3 共享 线程 


共享 线程 (Shared Worker) 可 以 同时 有 多 个 页 面 的 线程 连接 。 共 享 线程 与 专属 线程 的 
使 用 对 象 不 同 ， 它 是 由 SharedWorker 对 象 创建 的 。 


16.3.1 共享 线程 的 基本 用 法 


本 节 将 详细 介绍 共享 线程 的 基本 用 法 。 要 创建 共享 线程 ， 需 要 在 页 面 中 创建 一 个 
SharedWorker 对 象 ， 并 指定 线程 脚本 文件 。 在 线程 通信 方面 ， 仍 然 使 用 postMessage () 方 法 
和 message 事件 。 

1. 检测 浏览 器 的 支持 情况 

与 其 他 HTML 5 的 新 特性 一 样 , 在 使 用 SharedWorker 对 象 之 前 ， 需 要 检测 浏览 器 是 否 
支持 该 特性 。 检 测 方法 如 下 : 

if(typeof SharedWorker === "undefined")1{ 

alert (" 浏 览 器 不 支持 共享 线程 ! ") ; 

人 

由 于 共享 线程 使 用 的 是 SharedWorker 对 象 , 因 此 只 需 使 用 typeof 运 算 符 来 返回 window 
对 象 的 SharedWorker 属性 即 可 。 如果 浏览 器 不 支持 共享 线程 处 理 , 则 返回 的 是 "undefined" 。 


2. 创建 共享 线程 


使 用 SharedWorker 对 象 创建 共享 线程 与 使 用 Worker 对 象 创建 专属 线程 的 方法 基本 一 
致 ， 也 需要 提供 一 个 JavaScript 脚本 文件 的 URL 地 址 ， 该 脚本 文件 中 包含 了 线程 中 所 要 执 
行 的 代码 。 脚 本 文件 的 URL 地 址 也 可 以 是 相对 地 址 或 者 绝对 地 址 , 同样 受 浏览 器 的 同 源 策 
略 限制 。 


Var worker = new SharedWorker ("Code16-5sharedWorker.js"): 

实例 化 SharedWorker 对 象 , 即 创建 了 一 个 可 以 共享 的 线程 。 " Code16-5sharedWorker.js" 
是 共享 线程 执行 的 脚本 文件 。 

3. 给 线程 添加 监听 消息 事件 

与 专属 线程 一 样 ， 共 享 线程 也 使 用 message 事件 监听 线程 消息 。 但 不 同 的 是 ， 共 享 线 
程 是 使 用 SharedWorker 对 象 的 port 属性 来 与 线程 通信 的 ， 如 下 所 示 : 


worker.port.onmessage = function(e) {  // 注 意 : 这 里 使 用 port 属性 ! 
// 处 理 线程 worker 发 来 的 消息 


上 
也 可 以 使 用 添加 事件 的 方式 ， 如 下 所 示 : 


worker.port.addEventListener('message', function(e) { 
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// 处 理 线程 worker 发 来 的 消息 
}, false); 


worker.port.start();  // 注 意 : 当 使 用 addEventListener 时 ， 需 要 启动 端口 
这 里 有 两 个 需要 注意 的 地 方 : 一 个 是 事件 是 附加 在 对 象 的 port 属性 上 的 ; 另 一 个 是 当 
使 用 addEventListener 函数 来 添加 事件 时 ， 需 要 使 用 workerport start0 来 启动 端 


4. 向 线程 中 发 送 消息 
使 用 SharedWorker 对 象 的 port 属性 向 共享 线程 发 送 消 息 ， 如 下 所 示 : 


worker.port.postMessage (“Yang”); 
与 共享 线程 的 通信 都 是 由 SharedWorker 对 象 的 port 属性 来 完成 的 。 
5. 编写 线程 处 理 的 脚本 文件 


在 共享 线程 中 ， 首 先 使 用 connect 事件 监听 来 自 不 同 用 户 的 连接 ， 然 后 才能 在 connect 
事件 处 理 程序 中 为 各 个 连接 建立 各 自 的 消息 监听 和 消息 发 送 的 通信 机 制 ， 如 下 所 示 : 


Var count = 0; // 全 局 变量 
onconnect = function(e) { // 监 听 新 链接 
count += 1; 
Var port = e.ports[0]; 
port.postMessage ("欢迎 你 ! 这 是 新 的 链接 #" + count); 
port.onmessage = function(e) { // 为 该 连接 添加 消息 监听 事件 
port.postMessage (" 你 好 ，" + e.data); // 向 该 连接 的 页 面 发 送 消息 


} 
} 
在 线程 文件 中 ， 每 个 连接 与 线程 之 间 的 通信 是 在 connect 事件 中 进行 的 ， 所 以 各 个 通 
信之 间 是 相互 独立 的 。 但 是 它们 可 以 共享 全 局 的 信息 (如 变量 count)。 
另外 ， 共 享 线程 也 可 以 通过 importScript 来 导入 其 他 脚本 文件 。 


16.3.2 ”实验 室 : 共享 线程 使 用 示例 


与 专属 线程 相 比 ， 共 享 线程 避免 了 线程 的 重复 创建 和 销毁 的 过 程 ， 降 低 了 系统 性 能 的 
消耗 ， 如 CPU 处 理 其 调度 、 内 存 资 源 的 占用 及 回收 等 。 在 一 些 编程 语言 中 会 有 线程 池 的 概 
念 ， 而 线程 池 也 是 共享 线程 的 一 种 应 用 。 

我 们 使 用 前 面 介 绍 的 步骤 ， 实 现 一 个 共享 线程 的 示例 。 该 线程 会 提供 一 个 连接 计数 器 
以 记录 连接 数 ， 每 当 有 一 个 新 的 连接 时 ， 计 数 器 就 增加 1， 并 反馈 到 当前 连接 页 面 。 

【示例 16-5】 示例 的 页 面 文件 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> 共 享 线程 </title> 

</head> 

<body> 

<input type="text" value="" 
Value) ;return false;" /> 


onchange="worker .port .postMessage (this. 
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<pre id="log"> 日 志 :</pre> 


</body> 
</html> 
<script type="text/javascript"> 
if(typeof SharedWorker === "undefined"){ 
alert ("浏览 器 不 支持 共享 线程 ") ; 
} 
Var 1og = document .getElementById('10g'); 
// 创 建 SharedWorker 对 象 


Var worker = new SharedWorker ("Codel16-5sharedWorker.js"); 
worker.port.addEventListener ('message', function(e) { 
// 注 意 : 这 里 使 用 port 属性 
log.textContent += '\n' + e.data; 
Fs (EasB)s 
worker.port.start() ; // 注 意 : 当 使 用 addEventListener 时 ， 需 要 启动 端口 
worker .port .postMessage ("初始 化 ") ; // 发 送 消息 
</script> 


共享 线程 的 脚本 文件 文件 如 下 所 示 


var count = 0; // 计 数 器 
// 监 听 新 链接 
onconnect = function(e) { 
count += 1; 
Var port = e.ports[0]; 
// 向 该 连接 的 页 面 发 送 消息 
Port.postMessage (" 欢 迎 你 ! 这 是 链接 " + count); 
// 为 该 连接 添加 消息 监听 事件 


Port .onmessage = function(e) { 
Port.PostMessage (" 线 程 收 到 你 的 消息 : " + e.data); 
} 
} 


运行 结果 如 图 16-4 所 示 。 
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再 次 打开 该 页 面 ， 与 如 图 16-4 所 示 的 页 面 同时 运行 ， 结 果 如 图 16-5 所 示 。 
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图 16-5 同时 运行 的 第 二 个 页 面 


示例 说 明 : 由 两 次 运行 的 结果 可 见 ， 再 次 打开 的 页 面 如 图 16-5 所 示 ， 返 回 的 计数 器 显 
示 为 2?， 说 明 是 连接 到 共享 进程 的 第 二 个 连接 ; 由 于 第 一 次 运行 页 面 创建 了 共享 进程 ， 因 
此 第 二 次 运行 页 面 就 没有 再 次 访问 线程 脚本 文件 ， 而 是 直接 连接 到 已 经 存在 的 共享 进程 ; 
打开 的 两 个 页 面 可 以 分 别 与 共享 进程 进行 通信 ， 这 些 通 信 不 会 相互 干扰 ， 由 于 计数 器 是 全 
局 变量 ， 因 此 可 以 在 各 个 连接 到 该 进程 的 页 面 共享 该 信息 。 


16.4 Web Workers 接口 框架 解析 


HTML 5 提供 了 Web 线程 的 一 系列 接口 ， 这 些 接口 大 致 上 可 以 划分 为 线程 外 部 的 接口 
和 线程 内 部 的 接口 。 


16.4.1 线程 外 部 的 接口 


线程 外 部 的 接口 ， 即 操作 线程 的 接口 ， 主 要 描述 了 Web 线程 有 哪些 操作 。 这 里 包括 专 
属 线程 接口 和 共享 线程 接口 ， 它 们 是 一 脉 同宗 的 ， 都 实现 了 一 个 共同 的 抽象 线程 接口 。 


1. 抽象 线程 (AbstractWorker) 接口 清单 


抽象 线程 接口 ， 是 抽象 了 专属 线程 和 共享 线程 的 共同 特征 而 形成 的 接口 ， 定 义 了 专属 
线程 和 共享 线程 的 必 备 功能 。 接 口 清单 如 下 : 


[NoInterfaceObject] 
interface AbstractWorker { 

[TreatNonCallableAsNull] attribute Function? onerror; 
}; 
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抽象 线程 接口 定义 了 一 个 错误 事件 error， 表 明 这 个 事件 必须 被 支持 。 
2. 专属 线程 (Dedicated Worker) 接口 清单 


专属 线程 接口 在 实现 抽象 线程 的 基础 上 定义 了 特有 的 功能 。 比 如 接收 信息 、 发 送信 息 
及 终止 线程 等 操作 。 接 口 清单 如 下 : 
[Constructor (DOMString scriptURL)] 
interface Worker : EventTarget { 
void terminate(); 
void postMessage (any message, optional sequence<Transferable> 
transfer); 
[TreatNonCallableAsNull] attribute Function? onmessage; 
}; 
Worker implements AbstractWorker; 
专属 线程 的 Worker 对 象 是 一 个 隐 含 了 MessagePort 的 对 象 ， 即 实现 了 postMessage() 
方法 和 message 事件 等 。 由 于 专属 线程 实现 了 抽象 线程 接口 ， 因 此 默认 有 error 事件 。 具体 
说 明 如 下 。 
口 terminate() 方 法 : 调用 该 方法 ， 可 以 终止 一 个 运行 中 的 线程 。 
口 postMessage() 方 法 : 用 于 向 线程 发 送 消息 ， 消 息 可 以 是 字符 串 ， 也 可 以 是 结构 化 的 
数据 (如 Json )。 
口 message 事件 ， 用 于 监听 线程 发 来 的 消息 。 


3. 共享 线程 (Shared Worker) 接口 清单 


共享 线程 接口 在 实现 抽象 线程 的 基础 上 , 也 定义 了 特有 的 功能 。 比 如 提供 了 port 特性 ， 
通过 该 特性 可 以 实现 消息 的 收发 等 功能 。 接 口 清单 如 下 : 


[Constructor (DOMString scriptURL, optional DOMString name)] 
interface SharedWorker : EventTarget { 
readonly attribute MessagePort port; 
}; 
SharedWorker implements AbstractWorker; 


共享 线程 的 SharedWorker 对 象 只 有 一 个 port 属性 。port 属性 属于 MessagePort 类 型 ， 
所 以 在 共享 线程 中 的 通信 都 是 基于 port 属性 来 实现 的 。 另 外 ，SharedWorker 对 象 实现 了 抽 
象 线程 接口 ， 所 以 默认 包含 error 事件 。 


4. MessagePort 接 口 清 单 


MessagePort 接口 定义 了 消息 的 收发 功能 , 以 及 消息 的 收发 功能 的 开启 和 关闭 。 任何 实 
现 了 MessagePort 接口 的 特性 ， 都 可 以 独立 完成 消息 的 接收 和 发 送 ， 如 共享 线程 中 的 port 
特性 。 接 口 清单 如 下 : 


interface MessagePort : EventTarget { 
void postMessage (any message, optional sequence<Transferable> 
transfer); 
void start(); 
void close(); 
//event handlers 
[TreatNonCallableAsNull] attribute Function? onmessage; 
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人 implements Transferable; 
由 于 Worker 对 象 和 SharedWorker 对 象 中 的 port 属性 都 属于 MessagePort 接口 ， 因 此 
这 里 介绍 一 下 该 接口 中 的 方法 和 事件 。 
MessagePort 接口 中 包含 了 常用 的 postMessage() 方 法 和 message 事件 ， 还 包含 了 start0) 
方法 和 close() 方 法 。 
口 start0 方 法 : 开始 调度 从 端口 中 接收 的 消息 。 如 在 介绍 共享 线程 的 时 候 , 使 用 了 start0 
方法 来 启动 添加 的 监听 事件 。 
口 end0 方 法 : 断 开端 口 ， 使 其 不 再 活跃 。 这 也 是 相对 于 共享 线程 而 言 的 ， 即 是 断 开 
了 连接 ， 而 不 是 终止 线程 。 
start() 方 法 和 close( 方 法 可 用 于 共享 线程 ， 通 过 port 属性 调用 ， 但 在 专属 线程 中 不 能 
使 用 。 


16.4.2 ”线程 内 部 的 接口 


线程 内 部 的 接口 ， 就 是 线程 的 全 局 范围 或 线程 中 可 进行 的 操作 ， 主 要 描述 在 Web 线程 
中 《专属 线程 或 共享 线程 )， 可 以 操作 哪些 对 象 、 使 用 哪些 功能 。 

由 于 Web 线程 是 隐藏 在 背后 执行 的 ,在 前 面 的 介绍 中 ，Web 线程 是 不 可 以 访问 窗 体 对 
象 window 和 文档 对 象 document 的 ， 因 此 ，HTML 5 专门 规范 了 Web 线程 的 作用 范围 。 

在 前 面 的 讲解 中 可 以 发 现 ， 专 属 线程 和 共享 线程 的 线程 脚本 文件 在 写法 上 有 着 很 大 的 
不 同 ， 主 要 表现 在 线程 文件 的 通信 方面 ， 除 此 之 外 ， 线 程 的 作用 范围 有 着 很 多 共同 之 处 。 

线程 内 部 的 接口 包含 三 个 方面 : 通用 线程 范围 接口 、 专 属 线程 范围 接口 和 共享 线程 范 
围 接口 。 其 中 后 面 两 个 接口 都 实现 了 通用 的 接口 。 


1. WorkerGlobalScope 通 用 线程 范围 接口 清 


通用 线程 范围 接口 ， 是 抽象 的 专属 线程 范围 和 共享 线程 范围 的 通用 功能 而 形成 的 接 
口 ， 定 义 了 线程 中 一 定 要 支持 的 功能 。 如 是 否 在线 、 是 否 发 生 错误 ， 以 及 location 特性 实 
现 的 功能 。 接 口 清单 如 下 : 

[NoInterfaceObject] 

interface WorkerGlobalScope : EventTarget { 

readonly attribute WorkerGlobalScope self; 

readonly attribute WorkerLocation location; 

void close(); 

[TreatNonCallableAsNull] attribute Function? onerror; 


[TreatNonCallableAsNull] attribute Function? onoffline; 
[TreatNonCallableAsNull] attribute Function? ononline; 


}; 

WorkerGlobalScope implements WorkerUtils; 

WorkerGlobalScope 接口 定义 了 线程 中 所 能 使 用 的 属性 、 方 法 和 事件 ， 并 且 实 现 了 
WorkerUtils 接口 。 

self 属性 : 返回 的 是 WorkerGlobalScope 对 和 象 本 身 。 在 线程 脚本 文件 中 ,通常 是 可 以 省 
略 的 。 
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location 属性 : 返回 当 线程 被 创建 出 来 的 时 候 与 之 关联 的 WorkerLocation 对 象 ， 它 表 
示 用 于 初始 化 这 个 工作 线程 的 脚本 资源 的 绝对 URL, 即使 页 面 被 多 次 重 定 向 后 , 这 个 URL 
资源 位 置 也 不 会 改变 。 

close() 方 法 : 关闭 线程 。 当 脚本 调用 WorkerGlobalScope 对 象 的 close0) 方 法 时 ,浏览 器 
会 自动 执行 两 个 步骤 : 首先， 丢弃 工作 线程 事件 队列 中 的 所 有 任务 其次， 设置 工作 的 
WorkerGlobalScope 对 象 的 closing 状态 为 tue〈 这 将 会 阻止 任何 新 的 任务 被 加 载 到 队列 中 
来 )。 

error、online、offline 事件 : 分 别 是 处 理 错 误 事 件 、 在 线 事件 和 离线 事件 。 


2. DedicatedWorkerGlobalScope 专 属 线程 范围 接口 清单 


专属 线程 范围 接口 是 在 实现 了 通用 线程 范围 接口 的 基础 上 ， 为 专属 线程 范围 提供 的 专 
门 的 接口 。 定 义 了 专属 线程 中 需要 增加 的 发 送 消息 和 监听 消息 的 功能 。 接 口 清单 如 下 : 
interface DedicatedWorkerGlobalScope { 
void postMessage (any message, optional sequence<Transferable> 
transfer); 
[TreatNonCallableAsNull] attribute Function? onmessage; 
I 
DedicatedWorkerGlobalScope implements WorkerGlobalScope; 
DedicatedWorkerGlobalScope 接口 实现 了 WorkerGlobalScope 接口 ， 另 外 隐 含 地 实现 了 
MessagePort 对 象 , 即 增加 了 postMessage() 方 法 和 message 事件， 用 于 在 专属 线程 中 发 送 消 
息 和 监听 消息 。 


3. SharedWorkerGlobalScope 共 享 线程 范围 接口 清单 


共享 线程 范围 接口 是 在 实现 了 通用 线程 范围 接口 的 基础 上 ， 为 共享 线程 范围 提供 的 专 
门 的 接口 。 定 义 了 共享 线程 中 需要 增加 的 连接 事件 、 应 用 缓存 和 线程 名 称 等 功能 。 接 口 清 
单 如 下 : 


interface SharedWorkerGlobalScope : WorkerGlobalScope { 
readonly attribute DOMString name; 
readonly attribute ApplicationCache applicationCache; 
[TreatNonCallableAsNull] attribute Function? onconnect; 


}; 
SharedWorkerGlobalScope implements WorkerGlobalScope; 


SharedWorkerGlobalScope 接口 实现 了 WorkerGlobalScope 接口 。 共 享 线程 的 消息 传递 
是 在 各 自 的 连接 中 进行 的 ， 每 个 连接 可 以 在 connect 事件 中 获取 。 
口 name 属性 : 是 创建 SharedWorkerGlobalScope 对 象 时 ， 被 指派 的 名 称 。 该 名 称 通常 
是 指 构造 函数 中 指派 的 。 
口 applicationCache 属性 : 是 一 个 应 用 缓存 的 网 络 模型 ， 返 回 的 是 ApplicationCache 
对 象 。 共 享 线程 是 它 的 缓存 宿主 。 
口 connect 事件 ， 当 共享 线程 有 新 的 连接 时 触发 。 


4. WorkerUtils 接 口 清单 
WorkerUtils 接口 是 通用 线程 范围 实现 的 接口 , 定义 了 专属 线程 范围 和 共享 线程 范围 都 


“ls 


第 3 篇 


基于 HIML 5 的 Web 应 用 开发 实战 


必须 实现 的 功能 。 如 importScripts0 方 法 、 时 间 控 制 等 功能 。 接 口 清单 如 下 : 


[NoInterfaceObject] 

interface WorkerUtils { 
void importScripts (DOMString... urls); 
readonly attribute WorkerNavigator navigator; 


}; 


WorkerUtils implements WindowTimers; 
WorkerUtils implements WindowBase64; 


其 中 ， 


口 navigator 属性 : 返 


口 importScripts() 方 法 : 用 于 导入 其 他 线程 的 脚本 文件 。 
回 的 是 WorkerNavigator 对 象 。 


文档 接口 (如 Node 对 象 Document 对 象 等 )， 是 不 能 在 线程 中 操作 的 。WorkerUtils 
接口 实现 了 WindowTimers 和 WindowBase64。 其 中 WindowTimers 接口 中 定义 了 
setTimeout()，clearTimeout()，setInterval()，clearInterval() 等 方法 。 


5. WorkerLocation 接 口 清 


WorkerLocation 接口 是 通用 线程 范围 接口 中 的 location 特性 所 属 的 接口 ， 定 义 了 工作 
线程 脚本 资源 的 消息 信息 。 接 口 清单 如 下 : 
interface WorkerLocation { 


//URL decomposition IDL attributes 
stringifier readonly attribute DOMString href; 


readonly 
readonly 
readonly 
readonly 
readonly 
readonly 
readonly 


js 


attribute 
attribute 
attribute 
attribute 
attribute 
attribute 
attribute 


DOMString 
DOMString 
DOMString 
DOMString 
DOMString 
DOMString 
DOMString 


search; 
hash; 


WorkerLocation 对 象 表示 了 工作 线程 脚本 资源 的 绝对 URL 信息 。 我 们 可 以 使 用 它 的 
href 属性 取得 这 个 对 象 的 绝对 URL。WorkerLocation 接口 还 定义 了 与 位 置信 息 有 关 的 其 他 
属性 ， 如 用 于 信息 传输 的 协议 〈protocol)、 主 机 名 称 (hostname)、 端 口 (port)、 路 径 名 称 


(pathname) 等 。 
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本 章 主要 讲解 了 HTML 5 Web Workers 线程 的 概念 , 重点 讲解 了 专属 线程 的 基本 用 法 、 
线程 的 嵌 套 、 共 享 线程 的 基本 用 法 和 Web 线程 接口 框架 解析 。 本 章 的 难点 在 于 对 Web 线 
程 概念 的 理解 、 专 属 线程 和 共享 线程 的 区 别 ， 以 及 线程 的 嵌 套 。 线 程 的 作用 范围 也 是 新 的 
内 容 ， 调 试 比较 麻烦 ， 也 算是 本 章 的 难点 。 为 了 更 加 清晰 地 展现 Web 线程 的 完整 框架 ， 本 
章 专门 对 Web 线程 框架 接口 做 了 详细 的 解析 。 对 于 前 端 开发 人 员 来 说 ,本 章 的 内 容 确实 是 


一 个 挑战 。 


下 一 章 将 介绍 HTML 5 的 地 理 定位 一 -Geolocation API。 


Ms 
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16.6 习 题 


【习题 1】Web Workers 含 了 哪 两 种 线程 ? 
【习题 2】 使 用 Web Workers 多 线程 ， 需 要 提供 相应 的 线程 文件 。 在 线程 文件 中 ， 下 列 
哪些 功能 不 能 使 用 (多 选 ): 


A. document.getElementById() B. setTimeout() 
C. window.history.back() D. setInterval () 
E. importScripts() F. alertO 


【习题 3】Worker 对 象 可 以 创建 专属 线程 ， 举 例 说 明 如 何 接收 来 自 线程 的 消息 。 
【习题 4】SharedWorker 对 象 可 以 创建 共享 线程 ， 举 例 说 明 如 何 向 共享 线程 发 送 消 息 。 
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假设 一 个 这 样 的 场景 ， 如果 你 的 朋友 向 Web 应 用 程序 提供 了 自己 的 地 理 位 置 ， 那么 你 
就 可 以 在 地 图 上 很 容易 地 找到 他 。 在 传统 的 Web 应 用 中 ， 要 想 获 取 用 户 的 地 理 位 置 是 十 分 
困难 的 。 随 着 越 来 越 多 的 人 拥有 智能 手持 设备 ， 地 理 位 置 逐 渐 成 为 最 常用 的 应 用 之 一 。 
HTML 5 提供 的 Geolocation API 让 我 们 可 以 直接 使 用 JavaScript 脚本 来 获取 地 理 位 置信 息 。 
章 将 详细 介绍 地 理 位置 的 相关 概念 及 Geolocation API 的 用 法 。 


17.1 Geolocation 概述 


Geolocation API 定义 了 一 个 基于 主机 设备 实现 的 高 层次 接口 ,用 于 获取 地 理 位 置信 息 ， 
如 经 度 和 纬度 等 ，API 本 身 无 法 知道 地 理 位 置信 息 的 来 源 。 如 果 使 用 基于 地 理 位 置 的 应 用 ， 
则 需要 经 过 用 户 的 授权 。 


17.1.1 地 理 位 置信 息 


当 使 用 Geolocation API 请 求 用 户 的 地 理 位 置信 息 时 ， 如 果 用 户 同 意 ， 浏 览 器 就 会 返回 
相应 的 地 理 位 置信 息 ， 该 地 理 位 置信 息 来 源 于 用 户 设备 提供 的 功能 。 


1. 地 理 位 置 坐标 信息 


这 里 介绍 的 地 理 位 置 坐标 来 自 于 世界 大 地 测量 系统 (World Geodetic System)， 仅 用 于 
地 球 上 的 定位 。 最 基本 的 地 理 位置 坐 标 包括 : 

口 纬度 

口 经 度 

例如 ， 杭 州 的 纬度 为 30.273978， 经 度 为 120.155361。 在 地 理 位 置 的 应 用 中 通常 是 以 
十 进 制 格式 来 表示 经 纬度 的 。 除 了 纬度 和 经 度 ， 完 整 的 地 理 位 置 坐标 信息 还 包括 ; 

口 纬度 和 经 度 的 精确 度 

口 海拔 高 度 

口 海拔 精确 度 

口 移动 方向 

口 移动 速度 

根据 终端 设备 的 功能 不 同 , 地 理 位 置信 息 的 完整 性 会 有 所 差异 。 如 果 这 些 数据 不 存在 ， 
则 返回 null。 
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2. 地 理 位 置信 息 的 来 源 


HTML 5 Geolocation API 并 没有 指定 地 理 位 置信 息 的 来 源 ， 以 及 使 用 何 种 方式 获取 地 
理 位 置信 息 ， 这 部 分 工作 是 由 浏览 器 完成 的 。 浏 览 器 收 到 地 理 位 置信 息 请 求 时 ， 会 访问 地 
理 位 置信 息 的 来 源 ， 以 获取 相应 的 地 理 位 置信 息 。 常 见 的 地 理 位 置信 息 来 源 如 下 。 
口 GPS (全 球 定位 系统 )。 
口 网 络 信 号 位 置 ， 如 IP 地 址 、RFID、Wi-Fi、 蓝 牙 的 MAC 地 址 。 
口 GSM/CDMA 手机 的 ID。 
口 用 户 自 定义 数据 。 

至 于 使 用 哪 种 地 理 位 置信 息 来 源 ， 则 取决 于 用 户 终端 设备 的 功能 。 有 些 移动 设备 会 支 
持 GPS、Wi-Fi、 蓝 牙 等 功能 ， 但 台式 机 则 一 般 仅 支持 卫 地 址 。 所 以 ， 在 实际 的 应 用 中 ， 
并 不 能 保证 用 户 设 备 返回 的 实际 位 置 是 精确 的 。 


17.1.2 ”使 用 案例 


基于 地 理 位 置 的 应 用 非常 广泛 ， 下 面 提供 了 一 些 使 用 案例 。 

1. 发 现 周围 有 趣 的 地 方 

当 你 去 一 个 陌生 的 城市 旅游 时 ， 你 可 以 使 用 地 理 信 息 API，Web 应 用 程序 会 根据 你 的 
大 致 位 置 ， 来 呈现 比较 符合 你 的 需要 的 结果 。 例 如 ， 你 想 查 找 或 浏览 周边 的 旅游 景点 、 饭 
店 、 宾 馆 等 信息 ， 会 变 得 十 分 方便 。 

2. 标注 内 容 和 位 置信 息 

经 常 去 旅行 的 人 ， 通 常会 喜欢 在 走 过 的 地 方 留 下 自己 的 足迹 ， 如 记录 一 些 简 短 的 文字 
或 者 图 片 并 存储 。 每 当 增 加 新 的 内 容 时 ，Web 应 用 程序 会 自动 地 把 地 理 位 置 一 并 保存 。 如 
果 把 记录 的 内 容 自动 上 传 到 博客 等 网 站 ， 就 可 以 把 自己 的 足迹 分 享 给 网 络 中 的 其 他 用 户 。 


3. 确定 自己 的 位 置 

当 用 户 身 处 在 陌生 的 城市 或 区 域 时 ， 可 能 需要 检测 自己 所 处 的 位 置 。 当 他 使 用 手持 设 
备 导航 到 一 个 基于 Web 地 图 的 应 用 程序 时 , 可 以 使 用 地 理 位 置 API 来 确定 自己 在 地 图 上 的 
确切 位 置 。 如 果 可 能 ，Web 应 用 程序 还 能 为 他 提供 到 达 目 的 地 的 路 线 。 


4. 路 线 导 航 


用 户 可 以 使 用 实时 的 地 理 位 置信 息 ， 来 跟踪 地 理 位 置 的 变化 。 可 以 使 用 地 理 位 置 API 
来 重复 更 新 变化 的 位 置信 息 。 


5. 监控 有 趣 的 地 方 


一 个 导游 的 Web 应 用 ， 可 以 使 用 地 理 位 置 API， 来 发 现 用户 附 近 的 有 趣 的 地 方 ， 并 触 
发 音频 或 视频 通知 。 当 用 户 接近 某 个 任务 相关 的 地 标 时 ， 就 会 触发 提醒 。 
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6. 及 时 更 新 本 地 信息 


如 果 用 户 到 达 一 个 地 方 ， 需 要 获取 本 地 的 天 气 预报 或 新 闻 之 类 的 信息 ， 则 可 以 使 用 地 
理 定位 API。 如 果 用 户 的 位 置 发 生变 化 ， 则 相应 的 天 气 预报 或 新 闻 之 类 也 随 之 发 生变 化 。 


7. 基于 地 理 位 置 的 社交 网 络 


用 户 可 以 在 Web 应 用 中 使 用 地 理 定位 API， 及 时 地 共享 自己 的 位 置信 息 ， 也 可 以 跟踪 
自己 的 朋友 网 络 。 如 果 想 约 朋友 一 起 喝 茶 ， 可 以 找 一 个 比较 方便 的 茶馆 。 


17.1.3 ”隐私 策略 


地 理 位 置信 息 的 泄漏 会 损害 用 户 的 隐私 。Geolocation API 明确 规范 了 用 户 隐私 的 保护 
机 制 : 即 通过 Geolocation API 获取 用 户 位 置信 息 ， 如 果 用 户 没 有 明确 许可 ， 是 不 能 获取 位 
置信 息 的 。 


1. 地 理 定位 API 中 的 隐私 保护 


在 Geolocation API 的 规范 中 ， 地 理 位 置 的 隐私 保护 机 制 需 遵循 如 下 策略 。 

口 在 没有 用 户 许可 的 情况 下 ， 浏 览 器 不 能 向 Web 站 点 发 送 地 理 位 置信 息 

口 浏览 器 必须 通过 一 个 用 户 界面 向 用 户 提示 以 获得 许可 ; 或 者 该 站 点 已 经 与 用 户 建 

立 了 信任 关系 。 

口 用 户 界面 必须 包括 URI 的 主机 部 分 

口 如 果 页 面 跳 转 到 其 他 没有 许可 的 页 面 ， 则 需要 撤销 保存 的 会 话 和 许可 。 

对 于 一 些 用 户 代理 将 预先 建立 信任 关系 ， 不 再 需要 上 述 的 用 户 界 面 。 例 如 ， 浏 览 到 一 
个 网 页 ， 如 果 网 站 执行 地 理 位 置 请 求 ，VOIP 电话 可 能 不 存在 任何 用 户 界面 ， 就 产生 了 地 
理 位 置 许可 。 


OHMLS Geolocation 
© | yrr740:8080/hc/Chapter17/Code17-test2. htnl 家 只 


[© ynmra 8080 要 跟踪 您 的 地 理 位 置 。 二 十 了 解 详情 x 


图 17-1 在 Chrome 浏览 器 中 询问 是 否 共享 地 理 位 置 


2. 隐私 事项 


应 用 程序 只 能 在 必要 的 时 候 请 求 地 理 位 置信 息 ; 应 用 程序 只 能 在 提供 给 它们 的 任务 中 
使 用 地 理 位 置信 息 ; 一 旦 任务 完成 ， 应 用 程序 必须 释放 地 理 位 置信 息 ,除非 用 户 明确 许可 ， 
否则 不 能 保存 位 置信 息 ; 应 用 程序 还 必须 防止 未 经 授权 的 访问 ; 如 果 地 理 位 置信 息 被 保存 ， 
则 应 允许 用 户 删 除 或 更 新 该 信息 。 

应 用 程序 不 能 转发 未 经 用 户 许可 的 地 理 位 置信 息 ， 提 倡 重 传 时 使 用 加 密 的 方式 。 在 收 
集 地 理 位 置 数据 时 ， 应 用 程序 应 该 明确 、 清 楚 地 披露 以 下 内 容 。 

口 会 收集 位 置 数据 。 
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为 什么 收集 位 置 数 据 。 
数据 将 会 被 保留 多 久 。 
如 何 保 证 数据 安全 。 
位 置 数据 如 何 共享 。 
用 户 如 何 访问 、 更 新 和 删除 以 及 用 户 方面 的 任何 其 他 选择 。 
一 些 特殊 情况 

在 一 些 情 况 下 ， 用 户 可 能 会 无 意 中 向 浏览 器 授予 许可 ， 并 透露 自己 的 位 置 。 或 者 是 用 
户 授权 的 是 一 个 特定 的 URL， 由 于 内 容 发 生变 化 ， 先 前 的 授权 应 该 不 再 适用 ; 或 者 是 用 户 
可 能 仅仅 是 改变 了 主意 。 预 测 和 防止 这 些 情 况 是 非常 困难 的 ，Geolocation 规范 中 也 没有 规 
定 。 然 而 应 尽 可 能 地 方便 用 户 撤销 许可 权限 。 


网 日 日 . 马 怕 口 


17.2 ”Geolocation 基本 用 法 


本 节 将 详细 介绍 Geolocation 的 使 用 方法 , 主要 包括 两 种 类 型 的 地 理 位 置 请 求 : 单 次 地 
理 位 置 请 求 和 重复 性 的 地 理 位 置 更 新 。 


17.2.1 浏览 器 的 支持 情况 


Geolocation 是 HTML 5 中 新 增 的 一 项 重要 功能 。 在 各 个 浏览 器 的 后 来 的 版 本 中 ， 开 始 
陆续 地 支持 地 理 位 置 的 应 用 。 所 以 ， 在 使 用 基于 地 理 位 置 的 应 用 时 ， 需 检查 浏览 器 的 支持 
情况 。 

1. 浏览 器 支持 情况 


各 种 浏览 器 对 HIML 5 Geolocation 的 支持 程度 不 同 ， 并 且 还 在 不 断 更 新 。 在 HIML 5 
的 所 有 新 增 功能 中 ，Geolocation 是 第 一 批 被 全 部 接受 和 实现 的 功能 之 一 ， 相 关 的 规范 也 已 
经 达到 相对 成 熟 的 阶段 。 对 于 开发 人 员 来 说 ， 不 用 太 担心 未 来 的 变化 。 目 前 W3C 地 理 位 
置 API 被 以 下 桌面 浏览 器 支持 : 
口 Firefox 3.5+ 
口 Chrome 5.0+ 
口 Safari S.0+ 
口 Opera 10.6+ 
口 Internet Explorer 9.0+ 
W3C 地 理 位 置 API 还 可 以 被 手机 设备 支持 ， 如 下 : 
Android 2.0+ 
IPhone 3.0+ 
Opera Mobile 10.1+ 
Symbian (S60 3rd & 5th generation) 
Blackberry OS 6 


OOODOCDO 
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口 Maemo 
2. 浏览 器 支持 性 检查 


由 于 浏览 器 的 支持 程度 不 同 ， 因 此 在 使 用 Geolocaton 之 前 ， 有 必要 先 检 查 浏览 器 是 否 
支持 该 功能 。 通常 是 直接 检测 navigator.geolocation 对 象 是 否 存在 ， 这 是 一 种 最 为 便捷 的 检 
测 方法 。 

【示例 17-1】 浏览 器 支持 性 检测 。 

if (navigator.geolocation) { 
alert ("浏览 器 支持 Geolocation API"); 


} else { 
alert ("浏览 器 不 支持 Geolocation API"); 


} 
险 测 浏览 器 是 否 支持 Geolocation API， 可 以 减少 不 必要 的 错误 。 


17.2.2 单 次 获取 地 理 位 置 


在 许多 的 应 用 中 ， 只 请 求 一 次 用 户 的 地 理 位 置 即 可 。 单 次 请 求 地 理 位 置 ， 使 用 的 是 地 
理 位 置 API〈 即 navigator.geolocation 对 象 ) 的 getCurrentPosition() 方 法 。 


1， 使 用 getCurrentPosition() 方 法 请 求 地 理 位 置 


使 用 getCurrentPosition0) 方 法 , 可 以 直接 请 求 地 理 位置 。 该 方法 至 少 要 有 一 个 参数 ， 这 
个 必需 的 参数 是 一 个 回调 处 理 函 数 。 当 地 理 位 置 获 取 成 功 时 ， 会 把 地 理 位 置信 息 交 由 回调 
函数 来 处 理 。 

完整 的 使 用 方法 如 下 所 示 。 

【示例 17-2】 单 次 地 理 位 置 请 求 。 

// 成 功 回调 函数 : position 中 包含 了 所 有 的 地 理 位 置信 息 

function successCallback (position){ 
// 显 示 position 中 的 地 理 位 置信 息 
} 
// 错 误 回 调 函 数 : error 中 包含 了 错误 的 信息 
function errorCallback (error){ 

// 显 示 error 中 的 错误 信息 


’ 

Var options = {}; // 可 选 参数 

if(navigator.geolocation){ 
navigator.geolocation.getCurrentPosition(successCallback ,errorCallba 


ck,options); // 单 次 请 求 
， 


名 说明: 对 象 navigator geolocation 通过 getCurrentPosition() 方 法 向 浏览 器 底层 设备 请 求 地 
理 位 置信 息 ， 该 方法 有 三 个 参数 successCallback、errorCallback 和 options， 其 中 
第 一 个 参数 是 必需 的 ， 第 二 个 和 第 三 个 参数 是 可 选 的 。 


如 果 请 求 成 功 ， 则 调用 回调 函数 successCallback0: 如 果 请 求 失 败 ， 则 调用 回调 函数 
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errorCallback(); 参数 options 则 是 在 请 求 的 过 程 中 附件 一 些 特性 。 
一 旦 调用 了 getCurrentPosition() 方 法 ， 浏 览 器 就 会 询问 用 户 是 否 允 许 透 露地 理 位 置信 
息 ， 如 图 17-1 所 示 。 


2. 


回调 函数 successCallback() 


在 getCurrentPosition() 方 法 中 ，successCallback0 函 数 是 必需 的 回调 函数 。 一 旦 地 理 位 


置信 息 请 求 成 功 ， 就 会 调用 successCallback0) 函 数 ， 该 函数 中 的 参数 position 包含 了 请 求 到 
的 地 理 位 置信 息 。 参 数 position 包含 了 一 个 位 置 坐标 的 特性 coords， 该 特性 包含 7 个 方面 


的 信息 : 


DoOOOODO DO 


latitude (纬度 ) 

longitude (经 度 ) 

accuracy〈 纬 度 和 经 度 的 精确 度 ) 
altitude 〈 海 拔高 度 ) 
altitudeAccuracy (海拔 精确 度 ) 
heading 〈 移 动 方向 ) 

speed〈 移 动 速度 ) 


其 中 前 三 个 方面 (latitude、longitude 和 accuracy) 的 信息 是 必需 的 数据 ， 其 他 信息 不 
能 保证 浏览 器 都 能 支持 ， 如 果 不 支 持 则 返回 nul 。 接 下 来 完善 一 下 回调 函数 
successCallback()。 

【示例 17-3】 回调 函数 successCallback()。 


function successCallback (position){ 


} 


将 会 得 到 如 图 17-2 所 示 的 地 理 位 置信 息 , 获取 到 了 最 基本 的 纬度 、 经度 和 纬度 和 经 


// 显 示 position 中 的 信息 

Var temp = "<table border='0' cellpadding="'0' cellspacing="'1'>"; 
temp += "<tr><td> 纬 度 </td><td>" + position.coords.latitude + 
Te/Ed></tr>" > 

temp += "<tr><td> 经 度 </td><td>" + position.coords.longitude + 
w/c/ tr" 

temp += "<tr><td> 经 纬 精度 </td><td>" + position.coords.accuracy + 
wd>e rn 

temp += "<tr><td> 海 拔 </td><td>" + position.coords.altitude + 

ye E> Er 

temp += "<tr><td> 海 拔 精度 </td><td>" + position.coords.altitudeAccuracy 
eHEd></Er>n 

temp += "<tr><td> 前 进 方向 </td><td>" + position.coords.heading + 
med /re 

temp += "<tr><tqd> 移 动 速度 </td><td>" + position.coords.speed + 
sx/Ed>< /ron 

temp += "</table>"; 

document .getElementBylId("resultText") .innerHTML = temp; 


洱 


的 精确 度 。 


3. 


回调 处 理 函 数 errorCallback() 


在 getCurrentPosition() 方 法 中 ，errorCallback 0 函数 是 可 选 的 回调 函数 。 在 地 理 位 置信 
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息 请 求 过 程 中 ， 如 果 包 含 了 errorCallback 0 函数 ， 则 只 要 请 求 不 成 功 ， 都 会 调用 回调 函数 
errorCallback() 。 这 其 中 也 包括 未 被 用 户 二 
许可 。 € 3 © |Qywr40:n080/he /chapterlr/Code17 

errorCallback0 〇 回调 函数 包含 一 个 error 


HTML5 Geolocation 
参数 ,该 参数 中 记录 了 错误 的 代码 (code 特 和. i 
性 ) 和 错误 信息 (message 特性 )。 其 中 错误 A 
代码 中 的 错误 编号 代表 了 不 同 的 意义 , 错误 矢 红 靖 府 。 25000 
编号 如 下 。 证 
口 PERMISSION DENIED (编号 为 前 进 方 庙 。 null 
1)， 表示 用 户 选择 拒绝 浏览 器 获得 “| Pass mm 
其 地 理 位 置信 息 。 


口 POSITION _ UNAVAILABLE (编号 图 17-2 ”获取 到 的 地 理 位 置信 息 
为 2): 表示 已 尝试 获取 用 户 的 地 理 位 置 ， 但 失败 了 。 
口 TIMEOUT 〈 编 号 为 3): 如 果 用 户 设置 了 可 选 的 tmeout 值 ， 则 当 尝 试 请 求 用 户 的 
地 理 位 置 超过 该 时 间 时 ， 意 味 着 超时 。 
在 出 现 错误 的 情况 下 ， 需 要 让 用 户 知道 应 用 程序 出 了 问题 。 而 当 获 取 失 败 或 请 求 超时 
的 时 候 ， 通 常会 希望 再 一 次 尝试 请 求 。 接 下 来 完善 一 下 回调 函数 errorCallback ()。 
【示例 17-4】 回调 函数 errorCallback()。 


function errorCallback (error){ 
// 显 示 error 中 的 错误 信息 
VAr OLE = 
Switch (error.code){ 
Case error.PERMISSION DENIED: 
err = "用 户 阻止 了 该 页 面 获取 地 理 位 置 :”+ error.message; 
alert (err) 
break; 
Case error.POSITION UNAVAILABLE: 
err = "浏览 器 没 能 获取 到 地 理 位 置 : " + error.message + "\n 是 否 尝试 再 
次 请 求 ? "; 
confirm(err) ?navigator.geolocation.getCurrentPosition 
(successCallback,errorCallback) :""; 
break; 
case error.TIMEOUT: 
err = "获取 地 理 位 置 超时 : " + error .message + "\n 是 否 尝试 再 次 请 求 ? "; 
confirm(err) ?navigator.geolocation.getCurrentPosition 
(successCallback, errorCallback) :""; 
break; 
default: 
err = "获取 地 理 位 置 时 ， 产 生 了 一 个 错误 : " + error.message; 
alert (err); 
break; 


| 


4. 可 选 参数 options 


在 getCurrentPosition() 方 法 中 ，options 参数 是 可 选 的 。options 是 一 个 对 象 参 数 ， 其 中 
包括 了 三 个 可 选 的 特性 ， 分 别 介绍 如 下 。 
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口 enableHighAccuracy: 参数 默认 为 false。 如 果 设 置 为 ttme， 则 会 通知 浏览 器 启用 

Geolocation 的 高 精确 度 模式 。 

口 timeout: 可 选 值 ， 单 位 为 ms， 默 认为 mfinity〈 即 无 穷 大 的 意思 )。 设 置 当前 位 置 

请 求 所 允许 的 最 长 时 间 ， 如 果 在 这 个 时 间 段 内 没有 完成 ， 则 会 调用 错误 处 理 的 回 

调 函 数 。 询 问 用 户 许可 的 时 间 也 包括 在 内 。 

口 maximumAge: 可 选 值 ， 单 位 为 ms， 默 认为 0。 设 置 浏览 器 重新 计算 地 理 位 置 的 
时 间 间 隔 ， 即 更 新 位 置信 息 的 频率 。 只 要 浏览 器 在 该 时 间 段 之 内 成 功 请 求 过 位 置 
信息 ， 就 不 会 重新 计算 位 置 ， 直 接 使 用 之 前 获取 的 位 置信 息 。 

接 下 来 完善 一 下 可 选 参数 options。 

【示例 17-5$】 可 选 参数 options。 


Var options = { 
timeout : 5000, 
maximumAge : 600000 


}; // 可 选 参数 


5. Geolocation 单 次 请 求 示例 


综合 前 面 介绍 的 内 容 ， 就 可 以 构建 一 个 完整 的 获取 地 理 位 置 的 应 用 。 下 面 是 完整 的 示 
例 代码 。 
【示例 17-6】 可 选 参数 options。 


<!-- 页 面 信息 --> 
<!DOCTYPE html> 
<html> 
<head> 


<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<title>HTML 5 Geolocation</title> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div class="content"> 
<h1> HTML 5 Geolocation </h1> 
<p id="message"></p> 
<div id="resultText"> 
</div> 
<div style="clear:both;"></div> 
</div> 
</body> 
</html> 
<!-- 脚本 信息 --> 
<script type="text/javascript"> 
// 回 调 函 数 : position 中 包含 了 所 有 的 地 理 位 置信 息 
function successCallback (position){ 
// 显 示 position 中 的 信息 
Var temp = "<table border="'0' cellpadding="'0' cellspacing="'1'>"; 
temp += "<tr><td> 纬 度 </td><td>" + position.coords.latitude + 


<iEd>< /Er 

temp += "<tr><td> 经 度 </td><td>" + position.coords.longitude + 
Ped EE 

temp += "<tr><td> 经 纬 精度 </td><td>"” + position.coords.accuracy + 
es 


temp += "<tr><td> 海 拔 </td><td>"” + position.coords.altitude + 
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A 
temp += "<tr><td> 海 拔 精 度 </td><td>" + position.coords.altitudeAccuracy 
/E><IEr> 
temp += "<tr><td> 前 进 方向 </td><td>" + position.coords.heading + 
We Ed >< /AEr> 
temp += "<tr><td> 移 动 速度 </td><td>" + position.coords.speed + 
ve/td></tr>"s 
temp += "</table>"; 
document .getElementById ("resultText") .innerHTML = temp; 
上’ 
// 错 误 回 调 函 数 ，error 中 包含 了 错误 的 信息 
function errorCallback (error){ 
// 显 示 error 中 的 错误 信息 
Var err = ""; 
Switch (error.code){ 
Case error.PERMISSION DENIED: 
err = "用 户 阻止 了 该 页 面 获取 地 理 位 置 :" + error.message; 
alert (err); 


break; 
Case error.POSITION UNAVAILABLE: 


err = "浏览 器 没 能 获取 到 地 理 位 置 ; " + error.message + "\n 是 否 尝试 再 
次 请 求 ? "; 
confirm(err) ?navigator.geolocation.getCurrentPosition 
(successCallback,errorCallback, options):""; 
break; 

Case error.TIMEOUT: 
err = "获取 地 理 位 置 超时 : " + error .message + "\n 是 否 尝 试 再 次 请 求 ?"; 
confirm(err) ?navigator.geolocation.getCurrentPosition 
(successCallback,errorCallback, options):""; 
break; 

default: 
err = "获取 地 理 位 置 时 ， 产 生 了 一 个 错误 : " + error.message; 
alert (err); 
break; 


} 
} 
Var options = { 
timeout : 5000, 
maximumAge : 600000 
} ; // 可 选 参数 
if (navigator.geolocation){ 
navigator.geolocation.getCurrentPosition(successCallback ,errorCallba 


ck,options);  // 单 次 请 求 
} 


</script> 


成 功 获取 地 理 位 置 的 运行 结果 如 图 17-2 所 示 。 
17.2.3 ”重复 性 的 位 置信 息 更 新 


但 是 在 一 些 应 用 中 ， 需 要 不 断 地 更 新 用 户 的 地 理 位 置信 息 ，HTML 5 Geolocation 为 我 
们 提供 了 重复 更 新 地 理 位 置信 息 的 方法 watchPosition(0) 。watchPosition0 和 getCurrent- 
了 Position0) 的 使 用 方法 完全 类 似 : 


navigator.geolocation.getCurrentPosition(successCallback,errorCallback, 


options); 
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var watchId = navigator.geolocation.watchPosition(successCallback, 
errorCallback, options); 


仅 有 一 点 不 同 ， 使 用 watchPosition() 方 法 会 首先 返回 一 个 watchId， 然 后 以 既定 时 间 间 
隔 不 断 地 请 求 位 置信 息 。 如 果 用 户 想 关闭 更 新 ， 可 以 使 用 clearWatch0 方 法 ， 用 法 如 下 : 


navigator.geolocation.clearWatch (watchId) ; 


需要 说 明 的 是 ， 在 watchPosition() 方 法 中 设置 的 timeout 特性 ， 是 指 每 一 次 请 求 位 置信 
息 时 的 过 期 时 间 ， 而 不 是 总 的 过 期 时 间 ; 位 置信 息 更 新 的 频率 会 参考 maximumAge 特性 ; 
当 再 次 请 求 位 置信 息 时 ， 只 有 当 请 求 的 位 置 发 生变 化 的 时 候 ， 才 会 调用 回调 函数 
successCallback()。 


17.3 ”Geolocation 接口 解析 


在 Geolocation API 中 ， 涉 及 多 个 接口 对 象 。 为 了 能 理 清 它们 之 间 的 关系 ， 本 节 将 详细 
讲解 地 理 位 置 Geolocation 接口 及 其 附属 接口 。 


1.NavigatorGeolocation 接 口 清单 


NavigatorGeolocation 接口 定义 的 是 一 个 由 浏览 器 的 navigator 对 象 实现 的 接口 ,接口 清 
单 如 下 : 

[NoInterfaceObject] 

interface NavigatorGeolocation { 

readonly attribute Geolocation geolocation; 

}; 

Navigator implements NavigatorGeolocation; 

NavigatorGeolocation 接口 中 有 一 个 属于 Geolocation 对 象 的 geolocation 特性 。 由 于 
Navigator 实现 了 这 个 接口 ， 因 此 我 们 可 以 使 用 navigator.geolocation， 来 访问 Geolocation 
对 象 及 其 相关 的 附属 对 象 。 


2. Geolocation 接 口 清单 


Geolocation 接口 是 地 理 位 置 应 用 的 核心 接口 ,定义 了 获取 地 理 位 置 的 3 个 重要 的 方法 
和 2 个 回调 处 理 函 数 。 接 口 清单 如 下 : 


[NoInterfaceObject] 
interface Geolocation { 
void getCurrentPosition(in PositionCallback successCallback, 
in optional PositionErrorCallback errorCallback, 
in optional PositionOptions options); 
long watchPosition (in PositionCallback successCallback, 
in optional PositionErrorCallback errorCallback, 
in optional PositionOptions options); 
void clearWatch (in long watchId); 


}; 
[Callback=FunctionOnly, NoInterfaceObject] 
interface PositionCallback { 

void handleEvent (in Position position); 


}; 
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[Callback=FunctionOnly, NoInterfaceObject] 
interface PositionErrorCallback { 
void handleEvent (in PositionError error); 


}; 
由 接口 清单 可 知 ，Geolocation 接口 提供 了 3 个 方法 : 分 别 为 getCurrentPosition()、 
watchPosition0 和 clearWatch()。 

而 对 于 前 两 个 方法 中 使 用 的 回调 函数 successCallback0 有 一 个 Position 对 象 的 参数 
position; 回调 函数 errorCallback0 有 一 个 PositionError 对 象 的 参数 error。 可 选 参数 options 
则 属于 PositionOptions 对 象 。 


3. PositionOptions 接 口 清和 


PositionOptions 接口 定义 了 获取 地 理 位 置 时 的 可 选 参数 。 在 Geolocation 接口 中 ， 获 取 
地 理 位 置 时 ,包含 一 个 可 选 参数 options, 该 参数 从 属于 PositionOptions 接口 。PositionOptions 
接口 清单 如 下 : 


[Callback, NoInterfaceObject] 

interface PositionOptions { 
attribute boolean enableHighAccuracy; 
attribute long timeout; 
attribute long maximumAge; 


}; 
PositionOptions 接口 中 有 3 个 特性 ， 在 前 面 介绍 可 选 参数 options 时 已 经 介绍 过 了 。 
4. Position 接 口 清 单 


Position 接口 定义 了 地 理 位 置信 息 的 结构 。 主 要 包含 一 个 坐标 和 一 个 获取 该 坐标 的 时 
间 蕉 。 接 口 清 单 如 下 : 
[NoInterfaceObject] 
interface Position { 
readonly attribute Coordinates coords; 
readonly attribute DOMTimeStamp timestamp; 
| 
Position 接口 的 两 个 特性 如 下 。 
口 coords: 从 属于 Coordinates 对 象 ， 表 示 位 置信 息 中 的 坐标 信息 。 在 坐标 信息 中 ， 
不 仅 包含 了 纬度 、 经 度 、 准 确 度 ， 还 包含 了 海拔 、 海 拔 准 确 度 、 移 动 方向 和 移动 
口 timestamp: 时 间 锥 ， 即 采集 到 位 置信 息 的 时 间 点 。 


5. Coordinates 接 口 清 单 


Coordinates 接口 定义 了 地 理 位 置 坐标 的 详细 信息 ,全 方位 描述 了 地 理 位 置 的 各 个 特征 。 
接口 清单 如 下 : 


[NoInterfaceObject] 

interface Coordinates { 
readonly attribute double latitude; 
readonly attribute double longitude; 
readonly attribute double? altitude; 
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readonly attribute double accuracy; 
readonly attribute double? altitudeAccuracy; 
readonly attribute double? heading; 
readonly attribute double? speed; 
] 
Coordinates 接口 的 7 个 特性 分 别 描述 了 地 理 位 置 的 7 个 方面 的 信息 : 纬度 (latitaude)、 
经 度 (longitude )、 经 纬度 的 精确 度 (accuracy )、 海 拔 (altitude )、 海 拔 精 确 度 
gl 了 


(altitudeAccuracy)、 移 动 方向 (heading) 和 移动 速度 (speed)。 
6. PositionError 接 口 清 单 


PositionError 接口 ， 定 义 了 一 个 错误 的 信息 结构 。 当 获取 地 理 位 置 发 生 错误 时 ， 错 误 
处 理 函 数 会 接收 这 样 的 错误 信息 ， 包 含 了 错误 编码 和 详细 的 错误 描述 。 接 口 清 单 如 下 : 

[NoInterfaceObject] 

nterface PositionError { 
const unsigned short PERMISSION DENIED = 1; 
const unsigned short POSITION UNAVAILABLE = 2; 
const unsigned short TIMEOUT = 3; 
readonly attribute unsigned short code; 
readonly attribute DOMString message; 

}; 

PositionError 接口 中 有 两 个 特性 和 3 个 常量 。 

口 code: 表示 错误 代码 。 其 中 有 3 个 错误 代码 被 定义 为 常量 : PERMISSION_DENIED 
表示 用 户 拒绝 了 地 理 位 置 请 求 , POSITION_UNAVAILABLE 表示 获取 地 理 位 置 时 
失败 ; TIMEOUT 表示 获取 地 理 位 置 超时 。 

口 message: 描述 了 发 生 错误 的 详细 信息 。 此 特性 主要 用 于 开发 人 员 的 调试 ， 不 应 该 
把 这 些 错误 消息 显示 到 用 户 界面 。 


17.4 ”实验 室 : 在 地 图 上 显示 我 的 位 置 


本 节 将 使 用 Geolocation API 实现 一 个 常用 的 应 用 , 就 是 把 获取 到 的 地 理 位 置 显示 的 地 
图 上 。 而 地 图 应 用 则 来 源 于 地 图 服务 商 ， 目 前 网 络 上 可 以 使 用 的 地 图 服务 有 很 多 ， 这 里 选 
择 谷歌 地 图 服务 。 


1， 案例 简介 


在 本 节 介 绍 的 案例 中 ， 首 先 ， 通 过 Geolocation API 获取 用 户 当前 所 在 位 置 ， 然后， 把 
地 理 位 置 数 据 传递 给 调用 的 地 图 服务 ; 最终， 在 地 图 上 标注 用 户 当前 所 处 的 位 置 ， 案 例 效 
果 如 图 17-3 所 示 。 

2. 设计 页 面 

首先 设计 一 个 简易 的 页 面 ， 主 要 包括 标题 、 黄 色 背 景 的 提示 信息 、 地 理 位 置 数据 、 标 
注 了 “我 的 位 置 ”的 地 图 。 

【示例 17-7】 在 地 图 上 标注 “我 的 位 置 ”。 
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图 17-3 在 地 图 上 标注 我 的 位 置 


<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<title>HTML 5 Geolocation</title> 
<link href="style.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="http://maps.google.com/maps/api/ 
js?sensor=false"></script> 
</head> 
<body> 
<div class="content"> 
<h1l> HTML 5 Geolocation </h1> 
<p class="message" id="message">HTML 5 Geolocation</p> 
<div id="resultText"> 位 置 数据 </div> 
<div id="resultMap"> 地 图 </div> 
<div style="clear:both;"></div> 
</div> 
</body> 
</html> 


示例 17-7 代码 清单 中 ， 引 用 了 CSS 样式 表 (不 再 介绍 ) 和 一 个 链接 到 谷歌 地 图 服务 
的 脚本 文件 : 


<script type="text/javascript" src="http://maps.google.com/maps/api/ 
js?sensor=false"></script> 


src 特性 引用 的 地 址 , 可 以 链接 到 谷歌 的 地 图 服务 , 我 们 就 在 这 个 基础 上 完成 地 图 应 用 
的 功能 。 


3. 编写 基本 的 位 置 请 求 脚本 


这 里 使 用 的 是 单 次 地 理 位 置 请 求 。 
首先 定义 一 个 全 局 变量 goe, 再 定义 一 个 获取 Geolocation 对 象 的 函数 getGeolocation()。 
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我 们 在 页 面 加 载 完成 的 时 候 执 行 地 理 位 置 请求 。 
<script type="text/javascript"> 
var geo; // 全 局 变量 
// 获 取 Geolocation 对 象 
function getGeolocation(){ 
tryt{ 
if(!!Inavigator.geolocation) return navigator.geolocation; 
else return undefined; 
}catch(e){ 
return undefined; 
} 
| 
window.onload = function(){ 
if((geo=getGeolocation())){ 
document .getElementById ("message") .textContent = "正在 使 用 HTML 5 
地 理 定位 ..."; 
geo.getCurrentPosition (geo success,geo error,options); 
} else { 
document .getElementById ("message") .textContent = "不 支持 HTML 5 地 
理 定位 ! "; 
} 


} 
</script> 


4. 设置 可 选 参 数 options 
设置 5 秒 钟 的 超时 限制 ， 以 及 10 分 钟 的 位 置 更 新 频率 。 


<script type="text/javascript"> 
Var options = { 
enableHighAccuracy : false, 
timeout : 5000, // 超 时 时 间 限 制 
maximumAge : 600000 // 位 置 更 新 频率 
}; 
</script> 


5. 编写 成 功 获取 地 理 位 置 的 回调 函数 geo_success() 


如 果 成 功 获取 到 用 户 的 地 理 位 置 ， 则 一 方面 显示 用 户 得 到 的 位 置 数据 ， 另 一 方面 去 调 
用 Google 地 图 API， 并 在 地 图 上 标注 刚刚 获取 到 的 位 置信 息 。 


<script type="text/javascript"> 

function geo_success (position){ 
// 开 始 在 页 面 上 显示 地 理 位 置 数据 
Var temp = "<table border="'0' cellpadding="'0' cel1lspacing="17">"7 
temp += "<tr><td> 纬 度 </td><td>" + position.coords.latitude + 
</Ed></tr>"s 
temp += "<tr><td> 经 度 </td><td>" + position.coords.longitude + 


"</td></tr>"; 

temp += "<tr><td> 经 纬 精 度 </td><td>" + position.coords.accuracy + 
/Ed>S/Er2" 

temp += "<tr><td> 海 拔 </td><td>" + position.coords.altitude + 
"</td>e/ tr 


temp += "<tr><td> 海 拔 精 度 </td><td>" + position.coords.altitudeAccuracy 
SEE 
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temp += "<tr><td> 前 进 方向 </td><td>" + position.coords.heading + 
"< id></Er> "> 

temp += "<tr><td> 移 动 速度 </td><td>" + position.coords.speed + 
“</td></tr>"s 

temp += "</table>"; 

document .getElementById ("resultText") .innerHTML = temp; 


// 开 始 调用 Google 地 图 API 
var latlng = new google.maps.LatLng (position.coords.latitude, 
position.coords.longitude); 
var myOptions = { 
zoom: 15, center: latlng, 
mapTypeControl: false, 
navigationControlOptions: { 
style: google.maps.NavigationControlStyle.SsMALL 
}, 
mapTypeld: google.maps.MapTypelId.ROADMAP 
}; 
Var map = new google.maps.Map (document .getElementById("resultMap"), 
myOptions); 
Var marker = new google.maps.Marker ({ position: latlng, map: map, title:" 
我 的 位 置 !" }); 
} 
</script> 


关于 Google 地 图 API， 可 以 去 Google 网 站 参考 相关 的 文档 说 明 。 
6. 编写 错误 回调 函数 geo_error() 


当 出 现 错 误 或 用 户 拒绝 时 ， 会 把 相应 的 错误 提示 信息 显示 到 页 面 中 的 黄色 提示 区 域 。 
如 果 发 生 的 错误 是 POSITION_UNAVAILABLE 或 TIMEOUT, 将 会 询问 是 否 重新 获取 地 理 
位 置 。 


<script type="text/javascript"> 
function geo error (error){ 
Switch (error.code){ 
Case error.PERMISSION DENIED: 


document .getElementById ("message") .textContent = "用 户 阻止 了 获 
取 地 理 位 置 。"; 
break; 
Case error.POSITION UNAVAILABLE: 
document .getElementById ("message") .textContent = "浏览 器 没 能 获 


取 到 地 理 位 置 。"; 
confirm(" 是 否 尝试 再 次 请 求 ? ") ?geo .getCurrentPosition (geo 
success,geo error,options):""; 
break; 

case error.TIMEOUT: 
document .getElementById ("message") .textContent = "获取 地 理 位 置 
超时 。"™; 
confirm(" 是 否 尝 试 再 次 请 求 ? ") ?geo.getCurrentPosition(geo_ 
success,geo error,options):""; 
break; 

default: 
document .getElementById ("message") .textContent = "产生 了 一 个 未 
知 的 错误 。"; 
break; 
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</script> 
这 样 ， 就 可 以 在 地 图 上 标注 “我 的 位 置 ” 了 ， 示 例 运行 结果 如 图 17-3 所 示 。 
7. 改进 的 应 用 


我 们 可 以 把 它 改 进 为 不 断 更 新 地 理 位 置 应 用 ， 使 用 watchPosition() 方 法 定时 重复 更 新 
移动 变化 的 地 理 位 置 。 首 先 定义 一 个 全 局 变量 watchId， 并 把 window.onload 中 的 代码 改进 
如 下 : 

Var watchId; 


window.onload = function(){ 
if((geo=getGeolocation())){ 


document .getElementById ("message") .textContent = "正在 使 用 HTML 5 


地 理 定位 ..."; 
watchId = geo.watchPosition (geo success,geo error,options); 
} else { 
document .getElementById ("message") .textContent = "不 支持 HTML 5 地 
理 定位 ! "; 


这 样 ， 如 果 “ 我 的 位 置 ”处 在 变化 之 中 , 地 图 就 会 按照 一 定 的 频率 不 断 获 取 新 的 位 置 ， 
并 更 新 地 图 中 的 标注 。 

如 果 需 要 关闭 频繁 的 地 理 位 置 获 取 ， 可 以 调用 下 面 的 代码 : 

geo.clearWatch (watchId) 


改进 后 的 应 用 对 于 台式 机 等 固定 设备 没有 任何 意义 。 如 果 是 使 用 有 GPS 功能 的 移动 设 
备 ， 则 可 以 实时 地 监控 用 户 当前 的 位 置 。 


17:3, dd 结 


标 信 息 、 地 理 位 置 获取 原理 、 隐 私 策略 和 Geolocation 的 用 法 ， 并 详细 解析 了 Geolocation 
接口 。 本 章 的 难点 在 于 对 各 个 接口 对 象 的 理解 ， 由 于 对 象 直接 相互 嵌 套 ， 因 此 在 使 用 过 程 
中 很 容易 出 现 写 法 上 的 错误 。 本 章 的 另 一 个 难点 是 地 理 位 置 的 获取 比较 难 理解 ， 主 要 是 这 
一 部 分 对 我 们 是 透明 的 ， 完 全 交 给 了 浏览 器 来 实现 。 


17.6 习 题 


【习题 1】 请 列举 常用 的 地 理 位 置信 息 来 源 ， 至 少 列 出 三 种 。 

【习题 2】 能 否 在 不 知 不 觉 中 获取 用 户 地 理 位 置 ? 

【习题 3】 在 Geolocation 的 使 用 方法 中 ， 包 含 哪 两 种 地 理 位 置 请 求 ? 

【习题 4】 如 果 地 理 位 置 请 求 成 功 ， 则 会 返回 一 个 位 置 坐标 。 请 问 该 位 置 坐标 包含 哪些 
信息 ? 

【习题 5】 编 写 一 个 获取 设备 地 理 位 置 的 功能 ， 并 结合 地 图 服务 显示 获取 的 地 理 位 置 。 


a 


